jQuery+PHP实现上传裁剪图片

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

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

function showcutimg(showimg){
      var showimg = $(showimg);
      var changeinput = showimg.parents('.showimgdiv').siblings('.cutimage');
      var size = changeinput.siblings('.imgcoord').attr('ratio').split('*');
      var needwidth = size[0];
      var needheight = size[1];
      var ratio = parseint(needwidth)/parseint(needheight);
      ratio = parsefloat(ratio.tofixed(2));
      var thisfulldiv = showimg.parent();
      var coordarr = changeinput.siblings('.imgcoord').val().split(',');

      thiscutimgwidth = showimg.width();
      thiscutimgheight = showimg.height()

      thisfulldiv.css('width',thiscutimgwidth);
      thisfulldiv.css('height',thiscutimgheight);

      if((thiscutimgwidth/thiscutimgheight)>=ratio){
        var thiscutdivheight = thiscutimgheight;
        var thiscutdivwidth = thiscutdivheight*ratio;
      }else{
        var thiscutdivwidth = thiscutimgwidth;
        var thiscutdivheight = thiscutdivwidth/ratio;
      }

      var hidewidth = (thisfulldiv.width()-thiscutdivwidth)/2;

      showimg.siblings('.hideimgleft').width(hidewidth);
      showimg.siblings('.hideimgright').width(hidewidth);

      var hideheight = (thisfulldiv.height()-thiscutdivheight)/2;

      showimg.siblings('.hideimgtop').width(thiscutdivwidth);
      showimg.siblings('.hideimgbottom').width(thiscutdivwidth);

      showimg.siblings('.hideimgtop').height(hideheight);
      showimg.siblings('.hideimgbottom').height(hideheight);

      if(hidewidth>0){
        var cutratiox = thiscutimgwidth/hidewidth;
      }else{
        var cutratiox = 0
      }

      if(hideheight>0){
        var cutratioy = thiscutimgheight/hideheight;
      }else{
        var cutratioy = 0;
      }

      var coord = needwidth+'#'+needheight+'#'+(cutratiox)+'#'+(cutratioy);

      if(coordarr!=''){
        coordarr.push(coord);
      }else{
        coordarr = [coord];
      }

      changeinput.siblings('.imgcoord').val(coordarr);
      $('.fulldiv').on('mousedown',function(e){
        var me = $(this);

        var changeinput = me.parent().siblings('.cutimage');

        var index = me.attr('index');

        var oldx = e.pagex;
        var oldy = e.pagey;

        var imgleft = me.children('.cutimg').position().left;
        var imgtop = me.children('.cutimg').position().top;

        var maxw = me.children('.hideimgleft').width();
        var maxh = me.children('.hideimgtop').height();

        var goordarr = changeinput.siblings('.imgcoord').val().split(',');

        var cutdivsize = goordarr[index].split('#');

        $(document).mousemove(function(e){
          var newx = e.pagex;
          var newy = e.pagey;

          var movex = newx - oldx;
          var movey = newy - oldy;

          var x = movex + imgleft;
          var y = movey + imgtop;

          if(math.abs(x)>maxw){
            if(x>0) x = maxw;
            if(x<0) x = -maxw;
          }

          if(math.abs(y)>maxh){
            if(y>0) y = maxh;
            if(y<0) y = -maxh;
          }

          me.children('.cutimg').css('left',x+'px');
          me.children('.cutimg').css('top',y+'px');

          if(parseint(maxw - x)>0){
            var cutratiox = me.children('.cutimg').width()/parseint(maxw - x);
          }else{
            var cutratiox = 0;
          }

          if(parseint(maxh - y)>0){
            var cutratioy = me.children('.cutimg').height()/parseint(maxh - y)
          }else{
            var cutratioy = 0;
          }

          var cutimgpo = (cutratiox) +'#'+ (cutratioy);

          var coordval = cutdivsize[0]+'#'+cutdivsize[1]+'#'+cutimgpo;

          goordarr[index] = coordval;

          changeinput.siblings('.imgcoord').val(goordarr);


        });
      });


      $(document).on('mouseup',function(e){
        $(document).unbind('mousemove');
      });
    }



    $(".cutimage").change(function(){

      $(this).siblings('.imgcoord').val('');

      if($(this).prop('multiple')!=true){    //判断是否多文件上传
        var objurl = getobjecturl1(this.files[0]) ;

        var showimgwidth = $(this).siblings('.showimgdiv').attr('showimgwidth');

        if(!showimgwidth)
        {
          showimgwidth = '150';
        }

        if (objurl) {
            html = '';
            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">';
            html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideimgtop"></div>';
            html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideimgbottom"></div>';
            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>';
            html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideimgright"></div>';
            html += '<img style="position:absolute;z-index:1;width:'+showimgwidth+'px" onload="showcutimg(this)" class="cutimg" class="imgshover" src="'+objurl+'" alt="图片加载失败" />';
            html += '</div>';                    

            $(this).siblings('.showimgdiv').html(html);
        }

      }else{
        var objurl = getobjecturl2($(this).get(0).files);
        if (objurl) {

          var showimgwidth = $(this).siblings('.showimgdiv').attr('showimgwidth');

          if(!showimgwidth)
          {
            showimgwidth = '150';
          }

          var html = '';
          for(var i=0;i<objurl.length;i++)
          {
            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">';
            html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideimgtop"></div>';
            html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideimgbottom"></div>';
            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>';
            html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideimgright"></div>';
            html += '<img style="position:absolute;z-index:1;width:'+showimgwidth+'px" onload="showcutimg(this)" class="cutimg" class="imgshover" src="'+objurl[i]+'" alt="图片加载失败" />';
            html += '</div>';                    //修改img标签的width样式可改变预览图大小

          }

          $(this).siblings('.showimgdiv').html(html);

        }

        //$('.fulldiv').css('float','left');
      }


    }) ;

    //建立一個可存取到該file的url
    function getobjecturl1(file) {
      var url = null ; 
      if (window.createobjecturl!=undefined) { // basic
        url = window.createobjecturl(file) ;
      } else if (window.url!=undefined) { // mozilla(firefox)
        url = window.url.createobjecturl(file) ;
      } else if (window.webkiturl!=undefined) { // webkit or chrome
        url = window.webkiturl.createobjecturl(file) ;
      }
      return url ;
    }

    //建立一個可存取到該file的url
    function getobjecturl2(file) {
      var url = new array(); 
      if (window.createobjecturl!=undefined) { // basic
        for(var i=0;i<file.length;i++)
        {
          url[i] = window.createobjecturl(file[i]) ;
        }
      } else if (window.url!=undefined) { // mozilla(firefox)
        for(var i=0;i<file.length;i++)
        {
          url[i] = window.url.createobjecturl(file[i]) ;
        }
      } else if (window.webkiturl!=undefined) { // webkit or chrome
        for(var i=0;i<file.length;i++)
        {
          url[i] = window.webkiturl.createobjecturl(file[i]) ;
        }
      }
      return url ;
    }

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

<!-- 文件上传标签，添加class属性cutimage -->
<input class="cutimage" type="file" name="img" />

<!-- 传送图片裁剪比例等参数，要添加class属性imgcoord，ratio为裁剪后要保存的宽高width*height -->
<input ratio="100*100" type="hidden" class="imgcoord" name="imgcoord">

<!-- 图片预览，要添加class属性showimgdiv，showimgwidth表示预览时的宽度 -->
<div showimgwidth="100" class="showimgdiv"></div>

php代码

/*图片上传代码略 下面直接进行图片裁剪*/

/**
 * [cut_img 图片裁剪函数]
 * author: 程威明
 * @param array $imgs     图片路径数组
 * @param array $info     裁剪信息數組，包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比
 * @param bool $cover     是否覆盖原图，默认不覆盖
 * @return array        若覆盖原图返回裁剪数量，不覆盖返回图片路径组成的数组
 */
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
  if($infoarr==null) return $imgs;

  //判断是否为数组（必须是一个以图片路径组成的数组）
  $imgs = is_array($imgs)?$imgs:array($imgs);

  //把多个裁剪信息切成单个信息组成的数组
  $infoarr = explode(',', $infoarr);

  $save_file = array();

  $i=0;
  foreach($imgs as $file){

    //如果不覆盖原图，可重新定义图片保存路径
    if(false==$cover){
      $file = $file;
    }

    //把裁剪信息切割成数组，第一个为要保存的宽第二个为要保存的高，第三和第四个为图片宽高与裁剪起点的比例
    $info = explode('#', $infoarr[$i]);

    //裁剪宽高比
    $ratio = $info[0]/$info[1];

    //判断图片是否存在
    if(!file_exists($file)) continue;

    //获取图片信息
    $imgize = getimagesize($file);

    //图片宽度
    $width = $imgize[0];
    //图片高度
    $height = $imgize[1];

    //图片裁剪起点坐标
    $x = $info[2]==0?0:$imgize[0]/$info[2];
    $y = $info[3]==0?0:$imgize[1]/$info[3];

    //判断图片原宽高比与裁剪宽高比的大小
    if($width/$height>=$ratio){
      $width = $height*$ratio;//如大于即为裁剪宽度
    }else{
      $height = $width/$ratio;//如小于即为裁剪高度
    }

    //裁剪的寬高不能超出圖片大小
    if(($width+$x)>$imgize[0]){
      $width = $width-($width+$x-$imgize[0]);
    }

    if(($height+$y)>$imgize[1]){
      $height = $height-($height+$y-$imgize[1]);
    }

    //创建源图的实例
    $src = imagecreatefromstring(file_get_contents($file));

    //創建一個圖像
    $new_image = imagecreatetruecolor($info[0], $info[1]);

    //分配颜色
    $color = imagecolorallocate($new_image,255,255,255);
    //定义为透明色
    imagecolortransparent($new_image,$color);
    //填充图片
    imagefill($new_image,0,0,$color);

    //拷贝图片并保存成指定大小
    imagecopyresized($new_image, $src, 0, 0, $x, $y, $info[0], $info[1], $width, $height);

    //保存

    if(false==$cover){
      $file = rtrim(dirname($file),'/').'/c_'.basename($file);
      $save_file[] = $file;
    }

    imagejpeg($new_image,$file);

    imagedestroy($new_image);
    imagedestroy($src);

    $i++;
  }

  if(false==$cover){
    return $save_file;
  }else{
    return $i;
  }
}

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