jsp上传图片生成缩略图php手把手教你做网站三十上传图片生成缩略图

由于上传的图片宽度、高度比例和前台限定的不一定是一样的，这就可能涌现前台div内无法铺满或者宽度高度有超出的情形，下面是代码：

缩小方法imageZoom：

//原图$filename = "E:\phpweb\public\assets\skin\default\images/about.jpg";//缩略图保存的图片$savename="E:\phpweb\public\assets\skin\default\images/sabout.jpg";/ 300是宽度 200 高度/imageZoom($filename,300,200,$savename);

imageZoom方法实行缩小

jsp上传图片生成缩略图php手把手教你做网站三十上传图片生成缩略图 Java

function imageZoom($filename,$width,$height,$savename){ //获取原图信息 $sourceImageInfo = getimagesize($filename); $sourceWidth = $sourceImageInfo[0]; $sourceHeight = $sourceImageInfo[1]; $sourceMine = $sourceImageInfo['mime']; $sourceRatio = $sourceWidth/$sourceHeight; $sourceX = 0; $sourceY = 0; / 原图宽度小于目标图片（也便是缩小往后的图）不做任何操作 / if($sourceWidth<$width&&$sourceHeight<$height){ return ''; } / $zoom 打算缩小倍数哪个缩小的少就用哪个比例选择缩小少的在前台显示的时候可以添补斥div，但是会超出，须要用css隐蔽选择缩小多的，可以不超出，须要css设置旁边高下居中 / if(($width/$sourceWidth)<($height/$sourceHeight)){ $zoom=$height/$sourceHeight; }else{ $zoom=$width/$sourceWidth; } //缩小往后的宽度高度 $targetWidth =$zoom>=1?$sourceWidth:round($sourceWidth$zoom); $targetHeight =$zoom>=1?$sourceHeight:round($sourceHeight$zoom); $sourceImage = null; switch($sourceMine){ case 'image/gif': $sourceImage = imagecreatefromgif($filename); break; case 'image/jpeg': $sourceImage = imagecreatefromjpeg($filename); break; case 'image/png': $sourceImage = imagecreatefrompng($filename); break; default: return '图片信息发生缺点！ '; break; } $new_thumb = imagecreatetruecolor($sourceWidth, $sourceHeight); $targetImage = imagecreatetruecolor($targetWidth,$targetHeight); imagecopy($new_thumb, $sourceImage, 0, 0, $sourceX, $sourceY, $sourceWidth, $sourceHeight); imagecopyresampled($targetImage, $new_thumb, 0, 0, 0, 0, $targetWidth, $targetHeight, $sourceWidth, $sourceHeight); //设置header 可以直接浏览器查看 //header('Content-Type: image/jpeg'); //imagejpeg($target_image); //直接预览 //保存图片 if(file_exists($savename)){ unlink($savename); } imagejpeg($targetImage,$savename); //销毁 imagedestroy($new_thumb); imagedestroy($sourceImage); imagedestroy($targetImage); return 'ok';}

解释：

$sourceX, $sourceY是指截图的起始位置，间隔图片左上角的间隔；$sourceWidth, $sourceHeight是指沿着X轴，Y轴截取的间隔；

imagecopy($new_thumb, $sourceImage, 0, 0, $sourceX, $sourceY, $sourceWidth, $sourceHeight);

2、上传图片裁切

上传图片宽高比例不是前台显示的，通过裁切可以实现前台div内铺满

//原图$filename = "E:\phpweb\单语html10.21.11\public\assets\skin\default\images/about.jpg";//裁切往后保存的图片$savename="E:\phpweb\单语html10.21.11\public\assets\skin\default\images/sabout.jpg";//300 宽度 100 高度imagecut($filename,300,100,$savename);

imagecut方法裁切

解释：

高下2个方法通过比拟会创造险些都是一样的，不同点紧张在imagecopy()的参数也便是$sourceX, $sourceY,$sourceWidth, $sourceHeight;比如图片宽度1000px，而我们只想要800px的图片，上边方法便是以图片中央点为原点，多出来的分到了2边，复制的时候是在100px开始，复制800px的宽度（$sourceX=100;$sourceWidth=800;），Y轴方向的是同样的道理；如果就想以图片左上角为出发点，开始复制或者理解为裁切也是可以的；

3、预览图片裁切上传

图1 jquery图片预览裁切上传

预览利用的是jquery插件做的效果，js不能裁切，只是做了选取框，通过提交给后台php去裁切，通报的参数便是$sourceX, $sourceY, $sourceWidth, $sourceHeight，还有图片名称（包含路径要不便是后台自动添加路径）；预览的图片很可能不是图片的原始大小，是经由缩小的，比如原始1000px，而我们设置了div容器宽度为500px；选取框没有经由缩小，那么裁切图片上边通报的几个参数便是不准确的；如果原图比我们的容器要小，可以上传图片之前预览，把这几个参数同时通报到后台，上传完成往后利用上边的第2种情形裁切；大的图片该当先上传利用第2种情形裁切（宽度和高度不能超过我们预览图片的容器），返回裁切往后的图片到预览的窗口；

加载对应的js，css

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script><script src="js/jquery-migrate-1.2.1.js"></script> <script src="js/jquery.imgareaselect.pack.js"></script> <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />

解释：

利用了imgareaselect插件，实现预览裁切的效果，但是该插件在jquery1.9往后会出错，由于1.9往后取消了判断浏览器的方法，可以利用migrate插件使其连续生效，也可以直策应用jquery1.9以前的版本，也就不再须要migrate。

html代码

<div style="margin: 100px 0 0 100px;float:left;width:500px;height:400px;border:1px solid #DDD;"><img id="photo" src="/news.jpg" style="max-width:100%;max-height:100%;" /></div><div style='margin:100px 0 0 80px;float:left;'> 出发点X：<input type='text' id='x1' /><br/> 出发点Y：<input type='text' id='y1' /><br/> X长度：<input type='text' id='xwidth' /><br/> Y长度：<input type='text' id='yheight' /><br/> <button class='baocun'>保存</button></div>

解释：

x1，y1，xwidth，yheight对应了$sourceX, $sourceY, $sourceWidth, $sourceHeight

js代码

$(document).ready(function() { var picwidth=$("#photo").width();var picheight=$("#photo").height();var slkwidth=200;//选择器的宽度var slkheight=150;//选择器的高度 //初始值var x1=picwidth/2-slkwidth/2;var y1=picheight/2-slkheight/2;var x2=picwidth/2+slkwidth/2;var y2=picheight/2+slkheight/2;$("#x1").val(x1);//x轴$("#y1").val(y1);//Y轴$("#xwidth").val(slkwidth);//x轴长度$("#yheight").val(slkheight);//Y轴长度 $('#photo').imgAreaSelect({ //aspectRatio: '4:1', //横竖比例 handles: true, x1: x1, y1: y1, x2: x2, y2: y2, minWidth: slkwidth, minHeight: slkheight, //最大宽度高度 maxwidth maxheight fadeSpeed: 200,onSelectChange: cutinfo //回调方法 }); //保存选择的信息 $(".baocun").click(function(){ //须要通报的参数 var logX=$(".xianshk").position().left;//截图的x坐标 var logY=$(".xianshk").position().top;//截图的Y坐标 var rqwidth=$(".xianshk").width();//沿X轴截取的长度 var rqheight=$(".xianshk").height();//沿Y轴截取的长度 var picpath='images/about.jpg';//要裁切的文件(包含路径) console.log(logY); $.ajax({ //通报数据到后台程序通过php程序裁切图片 }) }) }); function cutinfo(img, selection) {$("#x1").val(selection.x1);//x轴$("#y1").val(selection.y1);//Y轴$("#xwidth").val(selection.width);//x轴长度$("#yheight").val(selection.height);//Y轴长度console.log(selection.x1); }

解释：

鼠标移动的时候触发cutinfo方法，实时获取坐标，赋值给对应的文本框；最大宽度和最小宽度设置一样，可以固定选择框的大小；上边的初始值便是通过打算，让选择框居中；可能会涌现当前默认的便是用户要裁切的图，以是要有个默认位置的初始值；

总结：

1）（imagecreatetruecolor）创建图像，只须要宽高

$cropped_image = imagecreatetruecolor($scale_width, $scale_height);

2）（imagecopy）复制图片到目标图

imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $scale_width, $scale_height);

$source_x, $source_y, $scale_width, $scale_height从哪个位置开始复制，复制的宽度，高度；

$source_image是调度比例往后的图片，如果不须要调度，那便是我们的原图；

3）（imagecopyresampled）复制过来的图片按比例缩小放到到目标图

imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $scale_width, $scale_height);

由于已经调度过比例，直接以左上角为出发点就可以，不必变动原点；如果不经由前边的步骤直策应用imagecopyresampled，天生的缩略图比例便是错的，图片会走形；