小程序踩坑記錄-上傳圖片及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 ;