小程序圖片剪裁

qylost 發(fā)布于2019-08-23 10:30 / 340人閱讀

摘要：基于上面原因，我采用的是里面放置圖片，監(jiān)聽上面的手勢(shì)，通過樣式控制圖片的旋轉(zhuǎn)縮放和移動(dòng)，最后剪裁用隱藏的。

一個(gè)微信小程序圖片剪裁組件，可以通過手勢(shì)控制旋轉(zhuǎn)縮放移動(dòng)，也可以點(diǎn)擊旋轉(zhuǎn)進(jìn)行90度旋轉(zhuǎn)，先看下效果（視屏不知道為啥用不了，上個(gè)壓縮過度的GIF先）：

圖片剪裁毫無疑問用的是canvas，但是開發(fā)過小程序的同學(xué)應(yīng)該了解小程序canvas的一些坑。比如小程序canvas的設(shè)定了畫布的大小后不能像web的canvas那樣通過css樣式來調(diào)整畫布在手機(jī)上顯示的大小、還有canvas不能設(shè)置太大因?yàn)榭赡軙?huì)在某些安卓機(jī)上導(dǎo)致小程序崩潰、canvas繪制過大的圖片會(huì)讓小程序變得非?？D等等。

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

　　基于上面原因，我采用的是view里面放置圖片，監(jiān)聽view上面的手勢(shì)，通過css樣式控制圖片的旋轉(zhuǎn)、縮放和移動(dòng)，最后剪裁用隱藏的canvas。先看下頁面布局：


  
  
    
  
  
      選擇圖片 
      旋轉(zhuǎn)
      剪裁

　　最重要的操作是圖片在view中的位置變化如何在canvas中保持一致再剪裁出來，圖片相對(duì)與view中的左上角坐標(biāo)、圖片的長(zhǎng)度和寬度我們都是知道的，還有旋轉(zhuǎn)值通過用戶手勢(shì)變化計(jì)算出來，旋轉(zhuǎn)的時(shí)候?qū)嫴嫉闹行囊苿?dòng)到圖片的中心點(diǎn)再旋轉(zhuǎn)就行了。

  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;

  //畫布中點(diǎn)坐標(biāo)轉(zhuǎn)移到圖片中心
  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();

　　查看完整代碼請(qǐng)移步到：https://github.com/yuanwyj/Mi...，喜歡的畫點(diǎn)個(gè)start～～