本篇文章為大家展示了小程序圖片剪裁加旋轉,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
成都創新互聯專業IDC數據服務器托管提供商,專業提供成都服務器托管,服務器租用,成都機柜租用,成都機柜租用,成都多線服務器托管等服務器托管服務。
圖片剪裁毫無疑問用的是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" catchtouchstart="touchstartCallback" catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback" > <image 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' 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();
上述內容就是小程序圖片剪裁加旋轉,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注創新互聯行業資訊頻道。
網頁題目:小程序圖片剪裁加旋轉
網頁URL:http://vcdvsql.cn/article24/gdgsje.html
成都網站建設公司_創新互聯,為您提供標簽優化、外貿建站、網站導航、商城網站、小程序開發、Google
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯