小程序圖片剪裁加旋轉(zhuǎn)

本篇文章為大家展示了小程序圖片剪裁加旋轉(zhuǎn)，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，成都機(jī)柜租用，成都機(jī)柜租用，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

圖片剪裁毫無疑問用的是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上的用戶手勢來控制圖片移動(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í)候要不停的重新繪制canvas，卡頓變得更加嚴(yán)重，體驗(yàn)非常不好。

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

<view class="container">
 <!-- 剪裁框與初始圖片，剪裁框監(jiān)聽用戶手勢，獲取移動(dòng)縮放旋轉(zhuǎn)值，images通過css樣式顯示變化 -->
 <view class="img"  catchtouchstart="touchstartCallback" catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback" >
  <image  src="{{ originImg.url }}"></image>
 </view>
 <view class='footer'>
   <view bindtap='uploadTap'>選擇圖片</view> 
   <view bindtap='rotate'>旋轉(zhuǎn)</view>
   <view bindtap='cropperImg'>剪裁</view>
 </view>

 <!-- canvas長寬設(shè)為初始圖片設(shè)置的長款的兩倍，使剪裁得到的圖片更清晰，也不至于過大 -->
 <canvas class='imgcrop'  canvas-id='imgcrop'></canvas>
</view>

最重要的操作是圖片在view中的位置變化如何在canvas中保持一致再剪裁出來，圖片相對(duì)與view中的左上角坐標(biāo)、圖片的長度和寬度我們都是知道的，還有旋轉(zhuǎn)值通過用戶手勢變化計(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();

上述內(nèi)容就是小程序圖片剪裁加旋轉(zhuǎn)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：小程序圖片剪裁加旋轉(zhuǎn)
網(wǎng)頁URL：http://www.muchs.cn/article24/gdgsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、外貿(mào)建站、網(wǎng)站導(dǎo)航、商城網(wǎng)站、小程序開發(fā)、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容