小程序圖片剪裁

一個微信小程序圖片剪裁組件，可以通過手勢控制旋轉縮放移動，也可以點擊旋轉進行90度旋轉，先看下效果（視屏不知道為啥用不了，上個壓縮過度的GIF先），也可以微信掃一掃下方小程序碼體驗進入 》打印》圖片打印體驗下效果　　　　　　　　　　　　　　　　　　

      圖片剪裁毫無疑問用的是canvas，但是開發過小程序的同學應該了解小程序canvas的一些坑。比如小程序canvas的設定了畫布的大小后不能像web的canvas那樣通過css樣式來調整畫布在手機上顯示的大小、還有canvas不能設置太大因為可能會在某些安卓機上導致小程序崩潰、canvas繪制過大的圖片會讓小程序變得非常卡頓等等。

　　網上能找到的圖片剪裁框架大多采用在canvas上面直接繪制圖片，然后通過監聽canvas上的用戶手勢來控制圖片移動旋轉等，這樣截出來的圖片會出現模糊的問題，因為canvas的太小了。一種解決方法是，在頁面上再放置一個隱藏的canvas大小設為原來的兩倍或者再大一點也行用來作為實際剪裁圖片的canvas，當然剪裁數據都是從第一個canvas那里來的。但是這樣還是有些小問題，就是canvas繪制大的圖片會出現卡頓的問題，這種方案在監聽用戶手勢的變化的時候要不停的重新繪制canvas，卡頓變得更加嚴重，體驗非常不好。

　　基於上面原因，我采用的是view里面放置圖片，監聽view上面的手勢，通過css樣式控制圖片的旋轉、縮放和移動，最后剪裁用隱藏的canvas。先看下頁面布局：

<view class="container">
  <!--  剪裁框與初始圖片，剪裁框監聽用戶手勢，獲取移動縮放旋轉值，images通過css樣式顯示變化  -->
  <view class="img" style="width:{{ width }}px; height:{{height}}px" catchtouchstart="touchstartCallback"  catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback"  >
    <image style="transform: translate({{stv.offsetX}}px, {{stv.offsetY}}px) scale({{stv.scale}}) rotate({{ stv.rotate }}deg);width:{{originImg.width}}px; height: {{originImg.height}}px" src="{{ originImg.url }}"></image>
  </view>
  <view class='footer'>
      <view bindtap='uploadTap'>選擇圖片</view> 
      <view bindtap='rotate'>旋轉</view>
      <view bindtap='cropperImg'>剪裁</view>
  </view>

  <!--  canvas長寬設為初始圖片設置的長款的兩倍，使剪裁得到的圖片更清晰，也不至於過大  -->
  <canvas class='imgcrop' style="width:{{ width * 2 }}px;height:{{ height * 2}}px;" canvas-id='imgcrop'></canvas>
</view>

　　最重要的操作是圖片在view中的位置變化如何在canvas中保持一致再剪裁出來，圖片相對與view中的左上角坐標、圖片的長度和寬度我們都是知道的，還有旋轉值通過用戶手勢變化計算出來，旋轉的時候將畫布的中心移動到圖片的中心點再旋轉就行了。

      let ctx = wx.createCanvasContext('imgcrop',this);
      let cropData = _this.data.stv;
      ctx.save();
      // 縮放偏移值
      let x = (_this.data.originImg.width - _this.data.originImg.width * cropData.scale) / 2;
      let y = (_this.data.originImg.height - _this.data.originImg.height * cropData.scale) / 2;

      //畫布中點坐標轉移到圖片中心
      let movex = (cropData.offsetX + x) * 2 + _this.data.originImg.width * cropData.scale;
      let movey = (cropData.offsetY + y) * 2 + _this.data.originImg.height * cropData.scale;
      ctx.translate(movex, movey);
      ctx.rotate(cropData.rotate * Math.PI / 180);
      ctx.translate(-movex, -movey);
      
      ctx.drawImage(_this.data.originImg.url, (cropData.offsetX + x) * 2, (cropData.offsetY + y) * 2, _this.data.originImg.width * 2 * cropData.scale, _this.data.originImg.height * 2 * cropData.scale);
      ctx.restore();

　　查看完整代碼請移步到：https://github.com/yuanwyj/Mini-Program-cropper， 喜歡的畫點個start～～