最近做一個需求,是上傳本地圖片,然后對其進行裁剪,轉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);默認是最頂層