您的位置 首页 php

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图片预览裁切上传

  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. 调整新生成的这个图片,以左上角为起点,进行缩小,使其宽度高度,均达到目标图的要求;

文章来源:智云一二三科技

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

文章地址:https://www.zhihuclub.com/77607.shtml

关于作者: 智云科技

热门文章

网站地图