欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  php教程

PHP Uploadify图片上传裁剪

程序员文章站 2022-06-15 20:49:55
...

在网站中需要一个图片上传裁剪的功能，借鉴这篇文章Ajax+PHP+jQuery图片截图上传的指点，找到了jquery.imgAreaSelect这个不错插件，能对图片进行自定义区域选择并给出坐标，类似微博等同类网站上传头像要求按比例裁剪的功能，正合适就自己做了个。 文件上传

在网站中需要一个图片上传裁剪的功能，借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点，找到了jquery.imgAreaSelect这个不错插件，能对图片进行自定义区域选择并给出坐标，类似微博等同类网站上传头像要求按比例裁剪的功能，正合适就自己做了个。


PHP Uploadify图片上传裁剪


文件上传类经常使用到一个叫uploadify的插件，上面提到的文章也结合了uploadify插件的使用，只是现在版本的uploadify一些配置和方法已经改变了(3.2.1版本)。包括jquery.imgareaselect的一些API也有新的变化，在做的过程中通过查询文档才确认了一些功能和配置的用法。

下面是两个插件的地址

uploadify： http://www.uploadify.com/ ( 有 uploadifive(HTML5) 版本和 Flash 版本，顾及不支持HTML5的浏览器，目前建议选择Flash版本 )

jquery.imgareaselect： http://odyniec.net/projects/imgareaselect ( 需先有 jQuery )

具体的流程都相似，客户端uploadify替代表单接收原图，异步上传到服务器，服务器端接收后存储并返回图片文件名，取得文件名后可在浏览器显示出原图，这时在图片元素上配置imgareaselect使其可划定裁剪区域，划定结束后坐标传回服务器，PHP脚本接收换算后的坐标对原图进行裁剪。上面提到的文章中有详细的流程图，作者非常细心。

下面说说我写的过程


上细节：首先是前端的配置

demo.php:

[javascript] view plaincopy

  1. $field = $("input[type='file']");
  2. $field.uploadify({//配置uploadify
  3. 'buttonText': '选择图片', //选择按钮显示的字符
  4. 'swf' : '/uploadify/uploadify.swf', //swf文件的位置
  5. 'uploader' : '/receivePic.php', //上传的接收者
  6. 'cancelImg' : '/uploadify/uploadify-cancel.png',
  7. 'folder' : '/picture',//上传图片的存放地址
  8. 'auto' : false, //选择图片后是否自动上传
  9. 'multi' : false, //是否允许同时选择多个(false一次只允许选中一张图片)
  10. 'method' : 'post',
  11. 'queueSizeLimit' : 1,//最多能选择加入的文件数量
  12. 'fileTypeExts': '*.gif; *.jpg; *.png', //允许的后缀
  13. 'fileTypeDesc': 'Image Files', //允许的格式，详见文档
  15. 'onSelect': function(file) {//选择文件后的触发事件
  16. $("a.xtPicSubmit").show().click(function(){//自定义的按钮，显示点击执行上传
  17. $field.uploadify('upload','*');//此处触发上传
  18. });
  19. $wrap.find("p.picInfo span").text(file.name);//file.name为选中的图片名称
  20. },
  22. 'onUploadSuccess' : function(file, data, response) { //上传成功后的触发事件
  23. $field.uploadify('disable', true); //(上传成功后)'disable'禁止再选择图片
  24. data = JSON.parse(data); //data为接收方(receivePic.php)返回的数据，稍后描述
  26. //此时开始对取回的数据处理出需要的图片名，宽高，并计算出原图比例尺，开始设定裁剪需要的计算量
  28. var orignW = data.width,//存储原图的宽高，用于计算
  29. orignH = data.height,
  30. aspectRatio = JSON.parse(picFormat)[index].width/JSON.parse(picFormat)[index].height,//提前设定的裁剪宽高比，规定随后裁剪的宽高比例
  31. frameW = 260, //原图的缩略图固定宽度，作为一个画布，限定宽度，高度自适应，保证了原图比例
  32. frameH = 0,
  33. prevFrameW = 140, //预览图容器的高宽，宽度固定，高为需要裁剪的宽高比决定
  34. prevFrameH = 140/aspectRatio,
  35. rangeX = 1, //初始缩放比例
  36. rangeY = 1,
  37. prevImgW = prevFrameW, //初始裁剪预览图宽高
  38. prevImgH = prevFrameW;
  40. $imgTar = $wrap.find("img.pic"), //画布
  41. $imgCut = $cut.find("img.cutImg");//预览图
  43. $imgTar.attr("src","/Picture/"+data.filename);//显示已上传的图片，此时图片已在服务器上
  44. frameH = Math.round(frameW*orignH/orignW);//根据原图宽高比和画布固定宽计算画布高，即$imgTar加载上传图后的高。此处不能简单用.height()获取，有DOM加载的延迟
  45. $cut.find(".preview").css('height',Math.round(prevFrameH)+"px");//设置裁剪后的预览图的容器高，注意此时的高度应由裁剪宽高比决定，而非原图宽高比
  47. //准备存放图片数据的变量，便于传回裁剪坐标
  48. CutJson.name = data.filename;
  49. CutJson.position = {};
  51. //准备好数据后，开始配置imgAreaSelect使得图片可选区
  52. var imgArea = $imgTar.imgAreaSelect({ //配置imgAreaSelect
  53. instance: true, //配置为一个实例，使得绑定的imgAreaSelect对象可通过imgArea来设置
  54. handles: true, //选区样式，四边上8个方框,设为corners 4个
  55. fadeSpeed: 300, //选区阴影建立和消失的渐变
  56. aspectRatio:'1:'+(1/aspectRatio), //比例尺
  58. onSelectChange: function(img,selection){//选区改变时的触发事件
  59. /*selection包括x1,y1,x2,y2,width,height几个量，分别为选区的偏移和高宽。*/
  60. rangeX = selection.width/frameW; //依据选取高宽和画布高宽换算出缩放比例
  61. rangeY = selection.height/frameH;
  62. prevImgW = prevFrameW/rangeX; //根据缩放比例和预览图容器高宽得出预览图的高宽
  63. prevImgH = prevFrameH/rangeY;
  65. //实时调整预览图预览裁剪后效果，可参见http://odyniec.net/projects/imgareaselect/ 的Live Example
  66. $imgCut.css({
  67. 'width' : Math.round(prevImgW)+"px",
  68. 'height' : Math.round(prevImgH)+"px",
  69. 'margin-left':"-"+Math.round((prevFrameW/selection.width)*selection.x1)+"px",
  70. 'margin-top' :"-"+Math.round((prevFrameH/selection.height)*selection.y1)+"px"
  72. });
  73. },
  74. onSelectEnd: function(img,selection){//放开选区后的触发事件
  75. //计算实际对于原图的裁剪坐标
  76. CutJson.position.x1 = Math.round(orignW*selection.x1/frameW);
  77. CutJson.position.y1 = Math.round(orignH*selection.y1/frameH);
  78. CutJson.position.width = Math.round(rangeX*orignW);
  79. CutJson.position.height = Math.round(rangeY*orignH);
  80. }
  81. });
  82. }
  83. });


此时已经取得了裁剪的坐标，只需将坐标传回服务器交给脚本处理

使用jQuery的ajax方法回传数据:

[javascript] view plaincopy

  1. $("a.getCut").click(function(){
  2. $.ajax({
  3. type: "POST",
  4. url : "cutPic.php",
  5. data: { name:data.filename,position:JSON.stringify(CutJson.position) },
  6. success: function(data){
  7. $imgTar.attr('src',"/picture/cut/"+data); //裁剪成功传回生成的新图文件名，将结果图显示到页面
  8. }
  9. });
  10. });

至此前端的处理就基本完成了（代码省去了一些状态显示，元素变化的处理细节），下面是后端的两个脚本：

首先是接收上传图片的脚本,接收并存储图片后返回图片数据:

receivePic.php

[php] view plaincopy

  1. //上传文件处理代码与往常相同，此处省去..
  3. $arr = getimagesize('/picture/'.$file['name']);
  4. $strarr = explode("\"",$arr[3]);//分析图片宽高
  5. $data = array(
  6. 'filename'=>$file['name'],
  7. 'width'=>$strarr[1],
  8. 'height'=>$strarr[3]
  9. );
  10. echo json_encode($data);

接下来是裁剪，其中也用到了PIPHP_ImageCrop裁剪函数

cutPic.php:

[php] view plaincopy

  1. function PIPHP_ImageCrop($image, $x, $y, $w, $h){
  2. $tw = imagesx($image);
  3. $th = imagesy($image);
  5. if ($x > $tw || $y > $th || $w > $tw || $h > $th)
  6. return FALSE;
  8. $temp = imagecreatetruecolor($w, $h);
  9. imagecopyresampled($temp, $image, 0, 0, $x, $y,
  10. $w, $h, $w, $h);
  11. return $temp;
  12. }
  14. $pic = '/picture/'.$_POST['name'];
  15. $cutPosition = json_decode($_POST['position']); //取得上传的数据
  16. $x1 = $cutPosition->x1;
  17. $y1 = $cutPosition->y1;
  18. $width = $cutPosition->width;
  19. $height = $cutPosition->height;
  21. $type=exif_imagetype($pic); //判断文件类型
  22. $support_type=array(IMAGETYPE_JPEG , IMAGETYPE_PNG , IMAGETYPE_GIF);
  23. if(!in_array($type, $support_type,true)) {
  24. echo "this type of image does not support! only support jpg , gif or png";
  25. exit();
  26. }
  27. switch($type) {
  28. case IMAGETYPE_JPEG :
  29. $image = imagecreatefromjpeg($pic);
  30. break;
  31. case IMAGETYPE_PNG :
  32. $image = imagecreatefrompng($pic);
  33. break;
  34. case IMAGETYPE_GIF :
  35. $image = imagecreatefromgif($pic);
  36. break;
  37. default:
  38. echo "Load image error!";
  39. exit();
  40. }
  42. $copy = PIPHP_ImageCrop($image, $x1, $y1, $width, $height);//裁剪
  44. $targetPic = '/picture/cut/'.$_POST['name'];
  46. imagejpeg($copy, $targetPic); //输出新图
  48. @unlink($pic);//删除原图节省空间
  50. echo $_POST['pic'].'?'.time(); //返回新图地址

整个过程就完成了。上个效果图：


PHP Uploadify图片上传裁剪


开始的部分很多参考了Ajax+PHP+jQuery图片截图上传 此篇详细的文章，这里再次说明。

后端的交互很轻松，任务主要在于前端两个插件之间的搭建和使用，我的代码写的比较仓促，应该需要更加结构化一点。另外上传文件的各方面控制也是一个风险(类型，大小等)，值得更多的考虑。

http://blog.csdn.net/as66t/article/details/11688217



----------------------------------------------------------------------------------------------------------------------

一、功能分析

用户直接上传图片，点击"上传"按钮之后，在图片预览图内可预览图片，然后进行图片的裁剪前预览，当点击"裁剪"按钮时确定裁剪图片，并在"裁剪结果"区域显示裁剪后的效果。

（说明：我是将上传文件保存在"/uploads"文件夹中，而截图结果放在"/avatar"文件夹里）

实现效果预览：


二、解决方案

1、插件的选择

  • jQuery：这个是必备的一个插件可以到官网上下载

http://docs.jquery.com/Downloading_jQuery

  • imgAreSselect:这个是实现客户端上图片区域选择的

http://odyniec.net/projects/imgareaselect/

  • uploadify：实现文件的上传的功能，支持多文件上传，且可定制性非常强。

http://www.uploadify.com/download/

上面的插件是用在客户端上，其实在我这个程序里写PHP时也用了一些插件。其实我之所以写"图像剪裁上传"的起源是因为我看了《PHP快速开发工具箱》想自己练习一下的。该书是有一个网址（http://www.pluginphp.com/），里面有整本书的代码，而且每个插件都相应的demo，非常不错。下面是用到的PHP插件：

  • PIPHP_UploadFile.php：这是一个文件上传功能的php文件

http://www.pluginphp.com/plug-in11.php

  • PIPHP_ImageCrop.php：这个php文件是具有对图片进行裁剪的功能

http://www.pluginphp.com/plug-in15.php

2、客户端与服务器之间的交互图

为了便于理解，我先把交互图放在这里。其中绿色部分是客户端的主要步骤、粉红色是服务器端的主要步骤，服务器与客户端之间的交互通过AJAX完成。可以发现，大部分的操作在客户端进行，服务器端与客户端之间的交流只是简单的JSON数据，因此这样给用户的体验是非常高的。

PHP Uploadify图片上传裁剪

截图 1　客户端与服务器之间交互图

3、客户端文件

展示给用户的是html页面，为了学习并巩固CSS知识，就和DIV+CSS搭建了下面这样一个前台页面，见截图 2。

PHP Uploadify图片上传裁剪

截图 2　前台页面

跟客户端有关的文件主要是一个index.html，而在这个文件里面会引用其他的插件文件，因此可以说，客户端方面只有一个html文件。

另外，由于这里主要讨论客户端与浏览器之间的交互，因此略过CSS方面的内容。这里只列出HTML的代码，首先是部分：

相关标签： PHP Uploadify 图片 上传 裁剪 网站 需要 一

上一篇： 超时后就没法再访问

下一篇： 现代 PHP 新特性系列（一） -- 命名空间

推荐阅读