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

三种方法：按比例缩小、图片裁切、预览图片裁切

1. 不管使用哪一个都是建立在图片已经上传的基础上；
2. 预览裁切上传，如果预览的图片就是原始大小，可以预览裁切以后上传（这里是个假象，下边会说明）；

1、上传以后按比例缩小

由于上传的图片宽度、高度比例和前台限制的不一定是一样的，这就可能出现前台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方法执行缩小

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';
}

说明：

1. $sourceX, $sourceY是指截图的起始位置，距离图片左上角的距离；
2. $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方法裁切

function imagecut($filename, $target_width, $target_height,$savename){
  //首先获取原图的信息（getimagesize）
  $source_info  = getimagesize($filename);
  $source_width = $source_info[0];
  $source_height = $source_info[1];
  $source_mime  = $source_info['mime'];
 
 //当原图的宽度 高度 均小于要裁切的宽度高度的时候 不做任何操作 
  if($source_width<$target_width&&$source_height<$target_height){
      return '';
  }
  //原图宽度 小于目标图宽度的时候 
  if($source_width<$target_width){
      $target_width=$source_width;
  }
    //原图高度 小于目标图高度的时候 
  if($source_height<$target_height){
      $target_height=$source_height;
  }
   //计算原图 和  目标图的宽高比例  原图按照目标比例载入
  $source_ratio = $source_height / $source_width;
  $target_ratio = $target_height / $target_width;

  /*
  source_x  ,source_Y是指到图片左上角的距离

  */
  if ($source_ratio > $target_ratio){
    // 图片按照比例 高度超出  需要在Y轴 截取
	//多出的高度 或者宽度  以图片的中心点为分界线，分在两边，
    $scale_width = $source_width;
    $scale_height = $source_width * $target_ratio;

    $source_x = 0;
    $source_y = ($source_height - $scale_height) / 2;


  }elseif ($source_ratio < $target_ratio){
    //图片按照比例 宽度超出  需要在X轴 截取
    $scale_width = $source_height / $target_ratio;
    $scale_height = $source_height;
    $source_x = ($source_width - $scale_width) / 2;
    $source_y = 0;
  }else{
    //比例一样  载入原图
    $scale_width = $source_width;
    $scale_height = $source_height;
    $source_x = 0;
    $source_y = 0;
  }
  switch ($source_mime){
    case 'image/gif':
      $source_image = imagecreatefromgif($filename);
      break;
    case 'image/jpeg':
      $source_image = imagecreatefromjpeg($filename);
      break;
    case 'image/png':
      $source_image = imagecreatefrompng($filename);
      break;
    default:
      return ;
      break;
  }
  $target_image = imagecreatetruecolor($target_width, $target_height);
  $cropped_image = imagecreatetruecolor($scale_width, $scale_height);
  // 在坐标轴 上截取图片载入
  imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $scale_width, $scale_height);
  // zoom
  imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $scale_width, $scale_height);
  //设置header  可以直接浏览器查看
  //header('Content-Type: image/jpeg');
  //imagejpeg($target_image);  //直接预览
  //保存图片
  if(file_exists($savename)){
      unlink($savename);
  }
  imagejpeg($target_image,$savename);

  imagedestroy($source_image);
  imagedestroy($target_image);
  imagedestroy($cropped_image);
}

说明：

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

3、预览图片裁切上传

1. 预览使用的是jquery插件做的效果，js不能裁切，只是做了选取框，通过提交给后台php去裁切，传递的参数就是$sourceX, $sourceY, $sourceWidth, $sourceHeight，还有图片名称（包含路径要不就是后台自动添加路径）；
2. 预览的图片很可能不是图片的原始大小，是经过缩小的，比如原始1000px，而我们设置了div容器宽度为500px；选取框没有经过缩小，那么裁切图片上边传递的几个参数就是不准确的；
3. 如果原图比我们的容器要小，可以上传图片之前预览，把这几个参数同时传递到后台，上传完成以后使用上边的第2种情况裁切；
4. 大的图片应该先上传使用第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);
    }

说明：

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

总结：

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);

1. 因为已经调整过比例，直接以左上角为起点就可以，不必更改原点；
2. 如果不经过前边的步骤直接使用imagecopyresampled，生成的缩略图比例就是错的，图片会走形；

如果按照上述步骤不好理解，可以换个角度，就像我们用软件制图一样。

1. 创建宽高的空白图像；
2. 调整原图比例，使其符合要目标图的比例，多出来的宽度或者高度分到2边，裁切（复制）中间部分到目标图；
3. 调整新生成的这个图片，以左上角为起点，进行缩小，使其宽度高度，均达到目标图的要求；