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