怎么在PHP中使用jQuery實(shí)現(xiàn)上傳裁剪圖片

怎么在PHP中使用jQuery實(shí)現(xiàn)上傳裁剪圖片？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

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  index="0" class="fullDiv">';
            html += '<div  class="hideImgTop"></div>';
            html += '<div  class="hideImgBottom"></div>';
            html += '<div  class="hideImgLeft"></div><div  class="cutDiv"></div>';
            html += '<div  class="hideImgRight"></div>';
            html += '<img  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  index="'+i+'" class="fullDiv">';
            html += '<div  class="hideImgTop"></div>';
            html += '<div  class="hideImgBottom"></div>';
            html += '<div  class="hideImgLeft"></div><div  class="cutDiv"></div>';
            html += '<div  class="hideImgRight"></div>';
            html += '<img  onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl[i]+'" alt="圖片加載失敗" />';
            html += '</div>';                    //修改img標(biāo)簽的width樣式可改變預(yù)覽圖大小

          }

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

        }

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


    }) ;

    //建立一個(gè)可存取到該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 ;
    }

    //建立一個(gè)可存取到該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代碼（這些代碼要放在同一級）

<!-- 文件上傳標(biāo)簽，添加class屬性CutImage -->
<input class="CutImage" type="file" name="img" />

<!-- 傳送圖片裁剪比例等參數(shù)，要添加class屬性imgCoord，ratio為裁剪后要保存的寬高width*height -->
<input ratio="100*100" type="hidden" class="imgCoord" name="imgCoord">

<!-- 圖片預(yù)覽，要添加class屬性showImgDiv，showImgWidth表示預(yù)覽時(shí)的寬度 -->
<div showImgWidth="100" class="showImgDiv"></div>

php代碼

/*圖片上傳代碼略 下面直接進(jìn)行圖片裁剪*/

/**
 * [cut_img 圖片裁剪函數(shù)]
 * Author: 程威明
 * @param array $imgs     圖片路徑數(shù)組
 * @param array $info     裁剪信息數(shù)組，包括裁剪后要保存的寬高、圖片大小與裁剪開始坐標(biāo)之比
 * @param bool $cover     是否覆蓋原圖，默認(rèn)不覆蓋
 * @return array        若覆蓋原圖返回裁剪數(shù)量，不覆蓋返回圖片路徑組成的數(shù)組
 */
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
  if($infoarr==null) return $imgs;

  //判斷是否為數(shù)組（必須是一個(gè)以圖片路徑組成的數(shù)組）
  $imgs = is_array($imgs)?$imgs:array($imgs);

  //把多個(gè)裁剪信息切成單個(gè)信息組成的數(shù)組
  $infoarr = explode(',', $infoarr);

  $save_file = array();

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

    //如果不覆蓋原圖，可重新定義圖片保存路徑
    if(false==$cover){
      $file = $file;
    }

    //把裁剪信息切割成數(shù)組，第一個(gè)為要保存的寬第二個(gè)為要保存的高，第三和第四個(gè)為圖片寬高與裁剪起點(diǎn)的比例
    $info = explode('#', $infoarr[$i]);

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

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

    //獲取圖片信息
    $imgize = getimagesize($file);

    //圖片寬度
    $width = $imgize[0];
    //圖片高度
    $height = $imgize[1];

    //圖片裁剪起點(diǎn)坐標(biāo)
    $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]);
    }

    //創(chuàng)建源圖的實(shí)例
    $src = imagecreatefromstring(file_get_contents($file));

    //創(chuàng)建一個(gè)圖像
    $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;
  }
}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。