微信小程序之 圖片裁剪


最近做一個需求,是上傳本地圖片,然后對其進行裁剪,轉base64,發送到后台接口做只能解析

原理:

使用

然后就在github上找到了一個(https://github.com/IFmiss/wx-cropper),但是使用發現有幾個問題

1:在安卓手機有卡頓現象

2:本地轉base64有時候需要時間很久,而且網上提供js源碼會壓縮原圖,導致圖片質量下降,ios端還存在圖片鏡像問題

3:裁剪框會越界

4:圖片初始化適配會有問題(小圖片會被放大,大圖會被縮小)

經過團隊討論最后放棄了前端轉base64方案,然后對其他3個問題進行了修復

1:解決卡頓現象,加了對touchmove方法加了節流,這個只能用setTimeout,因為小程序不支持requestAnimationFrame

2:放棄前端轉base64。直接傳圖片去接口

3:控制left和width值,代碼就不上了

4:略

圖片裁剪原理:

1:先選取圖片,然后放在image標簽中展示

2:設計裁剪框樣式,初始化大小

3:除非touch事件改變裁剪框位置和大小,計算邊界值

4:根據計算好的坐標位置和圖片寬高,利用canvas進行裁剪就OK了

這里有個很大的坑,千萬不能把圖片初始化放在canvas里,因為小程序里的canvas不能自定義層級(z-index);默認是最頂層


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM