小程序踩坑記錄-上傳圖片及canvas裁剪圖片後上傳至服務器

最近在寫微信小程序的上傳圖片功能,趟過了一些坑記錄一下。

想要滿足的需求是,從手機端上傳圖片至服務器,爲了避免圖片過大影響傳輸效率,需要把圖片裁剪至適當大小後再傳輸

主要思路是,通過wx.chooseImage()函數獲得圖片的文件路徑,在canvas畫板獲得文件路徑後,重新繪製成制定大小的圖片。再通過canvasToTempFilePath(),生成新的文件路徑。最後通過wx.uploadFile()上傳到指定服務器

遇到的坑有三個

一,在canvas中繪製的單位都是px,但由於不同屏幕的像素比不同,在小程序中樣式我們使用的單位是rpx,所以在canvas中就需要把rpx換成對應的px;由於rpx可以根據屏幕寬度進行自適應,規定屏幕寬爲750rpx,所以rpx換算成px的公式是:
1rpx = 屏幕寬度 / 750
這一點在小程序的官方文檔也有講到:
屏幕寬度可以使用wx.getSystemInfoSync();獲取;[][1]
所以例如在樣式中你的canvas寬度650rpx,那麼在canvas中繪製使用的寬度就是:(屏幕寬度 / 750)* 650 ;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章