小程序踩坑记录-上传图片及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 ;