当前位置：Gxlcms > JavaScript > jQuery+PHP实现上传裁剪图片

jQuery+PHP实现上传裁剪图片

时间：2021-07-01 10:21:17 帮助过：4人阅读

本文是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割

jquery代码（必须在最后面引入）

  1. function showCutImg(showImg){
  2.       var showImg = $(showImg);
  3.       var changeInput = showImg.parents('.showImgDiv').siblings('.CutImage');
  4.       var size = changeInput.siblings('.imgCoord').attr('ratio').split('*');
  5.       var needWidth = size[0];
  6.       var needHeight = size[1];
  7.       var ratio = parseInt(needWidth)/parseInt(needHeight);
  8.       ratio = parseFloat(ratio.toFixed(2));
  9.       var thisFullDiv = showImg.parent();
  10.       var coordArr = changeInput.siblings('.imgCoord').val().split(',');
  11.       thisCutImgWidth = showImg.width();
  12.       thisCutImgHeight = showImg.height()
  13.       thisFullDiv.css('width',thisCutImgWidth);
  14.       thisFullDiv.css('height',thisCutImgHeight);
  15.       if((thisCutImgWidth/thisCutImgHeight)>=ratio){
  16.         var thisCutDivHeight = thisCutImgHeight;
  17.         var thisCutDivWidth = thisCutDivHeight*ratio;
  18.       }else{
  19.         var thisCutDivWidth = thisCutImgWidth;
  20.         var thisCutDivHeight = thisCutDivWidth/ratio;
  21.       }
  22.       var hideWidth = (thisFullDiv.width()-thisCutDivWidth)/2;
  23.       showImg.siblings('.hideImgLeft').width(hideWidth);
  24.       showImg.siblings('.hideImgRight').width(hideWidth);
  25.       var hideHeight = (thisFullDiv.height()-thisCutDivHeight)/2;
  26.       showImg.siblings('.hideImgTop').width(thisCutDivWidth);
  27.       showImg.siblings('.hideImgBottom').width(thisCutDivWidth);
  28.       showImg.siblings('.hideImgTop').height(hideHeight);
  29.       showImg.siblings('.hideImgBottom').height(hideHeight);
  30.       if(hideWidth>0){
  31.         var cutRatioX = thisCutImgWidth/hideWidth;
  32.       }else{
  33.         var cutRatioX = 0
  34.       }
  35.       if(hideHeight>0){
  36.         var cutRatioY = thisCutImgHeight/hideHeight;
  37.       }else{
  38.         var cutRatioY = 0;
  39.       }
  40.       var coord = needWidth+'#'+needHeight+'#'+(cutRatioX)+'#'+(cutRatioY);
  41.       if(coordArr!=''){
  42.         coordArr.push(coord);
  43.       }else{
  44.         coordArr = [coord];
  45.       }
  46.       changeInput.siblings('.imgCoord').val(coordArr);
  47.       $('.fullDiv').on('mousedown',function(e){
  48.         var me = $(this);
  49.         var changeInput = me.parent().siblings('.CutImage');
  50.         var index = me.attr('index');
  51.         var oldx = e.pageX;
  52.         var oldy = e.pageY;
  53.         var imgleft = me.children('.cutImg').position().left;
  54.         var imgtop = me.children('.cutImg').position().top;
  55.         var maxw = me.children('.hideImgLeft').width();
  56.         var maxh = me.children('.hideImgTop').height();
  57.         var goordArr = changeInput.siblings('.imgCoord').val().split(',');
  58.         var cutDivSize = goordArr[index].split('#');
  59.         $(document).mousemove(function(e){
  60.           var newx = e.pageX;
  61.           var newy = e.pageY;
  62.           var movex = newx - oldx;
  63.           var movey = newy - oldy;
  64.           var x = movex + imgleft;
  65.           var y = movey + imgtop;
  66.           if(Math.abs(x)>maxw){
  67.             if(x>0) x = maxw;
  68.             if(x<0) x = -maxw;
  69.           }
  70.           if(Math.abs(y)>maxh){
  71.             if(y>0) y = maxh;
  72.             if(y<0) y = -maxh;
  73.           }
  74.           me.children('.cutImg').css('left',x+'px');
  75.           me.children('.cutImg').css('top',y+'px');
  76.           if(parseInt(maxw - x)>0){
  77.             var cutRatioX = me.children('.cutImg').width()/parseInt(maxw - x);
  78.           }else{
  79.             var cutRatioX = 0;
  80.           }
  81.           if(parseInt(maxh - y)>0){
  82.             var cutRatioY = me.children('.cutImg').height()/parseInt(maxh - y)
  83.           }else{
  84.             var cutRatioY = 0;
  85.           }
  86.           var cutImgPo = (cutRatioX) +'#'+ (cutRatioY);
  87.           var coordVal = cutDivSize[0]+'#'+cutDivSize[1]+'#'+cutImgPo;
  88.           goordArr[index] = coordVal;
  89.           changeInput.siblings('.imgCoord').val(goordArr);
  90.         });
  91.       });
  92.       $(document).on('mouseup',function(e){
  93.         $(document).unbind('mousemove');
  94.       });
  95.     }
  96.     $(".CutImage").change(function(){
  97.       $(this).siblings('.imgCoord').val('');
  98.       if($(this).prop('multiple')!=true){    //判断是否多文件上传
  99.         var objUrl = getObjectURL1(this.files[0]) ;
  100.         var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');
  101.         if(!showImgWidth)
  102.         {
  103.           showImgWidth = '150';
  104.         }
  105.         if (objUrl) {
  106.             html = '';
  107.             html += '<div style="border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="0" class="fullDiv">';
  108.             html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
  109.             html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
  110.             html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
  111.             html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
  112.             html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl+'" alt="图片加载失败" />';
  113.             html += '</div>';                    
  114.             $(this).siblings('.showImgDiv').html(html);
  115.         }
  116.       }else{
  117.         var objUrl = getObjectURL2($(this).get(0).files);
  118.         if (objUrl) {
  119.           var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');
  120.           if(!showImgWidth)
  121.           {
  122.             showImgWidth = '150';
  123.           }
  124.           var html = '';
  125.           for(var i=0;i<objUrl.length;i++)
  126.           {
  127.             html += '<div style="margin-bottom:5px;border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="'+i+'" class="fullDiv">';
  128.             html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
  129.             html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
  130.             html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
  131.             html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
  132.             html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl[i]+'" alt="图片加载失败" />';
  133.             html += '</div>';                    //修改img标签的width样式可改变预览图大小
  134.           }
  135.           $(this).siblings('.showImgDiv').html(html);
  136.         }
  137.         //$('.fullDiv').css('float','left');
  138.       }
  139.     }) ;
  140.     //建立一個可存取到該file的url
  141.     function getObjectURL1(file) {
  142.       var url = null ; 
  143.       if (window.createObjectURL!=undefined) { // basic
  144.         url = window.createObjectURL(file) ;
  145.       } else if (window.URL!=undefined) { // mozilla(firefox)
  146.         url = window.URL.createObjectURL(file) ;
  147.       } else if (window.webkitURL!=undefined) { // webkit or chrome
  148.         url = window.webkitURL.createObjectURL(file) ;
  149.       }
  150.       return url ;
  151.     }
  152.     //建立一個可存取到該file的url
  153.     function getObjectURL2(file) {
  154.       var url = new Array(); 
  155.       if (window.createObjectURL!=undefined) { // basic
  156.         for(var i=0;i<file.length;i++)
  157.         {
  158.           url[i] = window.createObjectURL(file[i]) ;
  159.         }
  160.       } else if (window.URL!=undefined) { // mozilla(firefox)
  161.         for(var i=0;i<file.length;i++)
  162.         {
  163.           url[i] = window.URL.createObjectURL(file[i]) ;
  164.         }
  165.       } else if (window.webkitURL!=undefined) { // webkit or chrome
  166.         for(var i=0;i<file.length;i++)
  167.         {
  168.           url[i] = window.webkitURL.createObjectURL(file[i]) ;
  169.         }
  170.       }
  171.       return url ;
  172.     }

html代码（这些代码要放在同一级）

  1. <!-- 文件上传标签，添加class属性CutImage -->
  2. <input class="CutImage" type="file" name="img" />
  3. <!-- 传送图片裁剪比例等参数，要添加class属性imgCoord，ratio为裁剪后要保存的宽高width*height -->
  4. <input ratio="100*100" type="hidden" class="imgCoord" name="imgCoord">
  5. <!-- 图片预览，要添加class属性showImgDiv，showImgWidth表示预览时的宽度 -->
  6. <div showImgWidth="100" class="showImgDiv"></div>

php代码

  1. /*图片上传代码略 下面直接进行图片裁剪*/
  2. /**
  3.  * [cut_img 图片裁剪函数]
  4.  * Author: 程威明
  5.  * @param array $imgs     图片路径数组
  6.  * @param array $info     裁剪信息數組，包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比
  7.  * @param bool $cover     是否覆盖原图，默认不覆盖
  8.  * @return array        若覆盖原图返回裁剪数量，不覆盖返回图片路径组成的数组
  9.  */
  10. function cut_img($imgs=array(),$infoarr=null,$cover=false)
  11. {
  12.   if($infoarr==null) return $imgs;
  13.   //判断是否为数组（必须是一个以图片路径组成的数组）
  14.   $imgs = is_array($imgs)?$imgs:array($imgs);
  15.   //把多个裁剪信息切成单个信息组成的数组
  16.   $infoarr = explode(',', $infoarr);
  17.   $save_file = array();
  18.   $i=0;
  19.   foreach($imgs as $file){
  20.     //如果不覆盖原图，可重新定义图片保存路径
  21.     if(false==$cover){
  22.       $file = $file;
  23.     }
  24.     //把裁剪信息切割成数组，第一个为要保存的宽第二个为要保存的高，第三和第四个为图片宽高与裁剪起点的比例
  25.     $info = explode('#', $infoarr[$i]);
  26.     //裁剪宽高比
  27.     $ratio = $info[0]/$info[1];
  28.     //判断图片是否存在
  29.     if(!file_exists($file)) continue;
  30.     //获取图片信息
  31.     $imgize = getimagesize($file);
  32.     //图片宽度
  33.     $width = $imgize[0];
  34.     //图片高度
  35.     $height = $imgize[1];
  36.     //图片裁剪起点坐标
  37.     $x = $info[2]==0?0:$imgize[0]/$info[2];
  38.     $y = $info[3]==0?0:$imgize[1]/$info[3];
  39.     //判断图片原宽高比与裁剪宽高比的大小
  40.     if($width/$height>=$ratio){
  41.       $width = $height*$ratio;//如大于即为裁剪宽度
  42.     }else{
  43.       $height = $width/$ratio;//如小于即为裁剪高度
  44.     }
  45.     //裁剪的寬高不能超出圖片大小
  46.     if(($width+$x)>$imgize[0]){
  47.       $width = $width-($width+$x-$imgize[0]);
  48.     }
  49.     if(($height+$y)>$imgize[1]){
  50.       $height = $height-($height+$y-$imgize[1]);
  51.     }
  52.     //创建源图的实例
  53.     $src = imagecreatefromstring(file_get_contents($file));
  54.     //創建一個圖像
  55.     $new_image = imagecreatetruecolor($info[0], $info[1]);
  56.     //分配颜色
  57.     $color = imagecolorallocate($new_image,255,255,255);
  58.     //定义为透明色
  59.     imagecolortransparent($new_image,$color);
  60.     //填充图片
  61.     imagefill($new_image,0,0,$color);
  62.     //拷贝图片并保存成指定大小
  63.     imagecopyresized($new_image, $src, 0, 0, $x, $y, $info[0], $info[1], $width, $height);
  64.     //保存
  65.     if(false==$cover){
  66.       $file = rtrim(dirname($file),'/').'/c_'.basename($file);
  67.       $save_file[] = $file;
  68.     }
  69.     imagejpeg($new_image,$file);
  70.     imagedestroy($new_image);
  71.     imagedestroy($src);
  72.     $i++;
  73.   }
  74.   if(false==$cover){
  75.     return $save_file;
  76.   }else{
  77.     return $i;
  78.   }
  79. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！