小程序像素单位自适应

最近在写微信小程序的上传图片功能，趟过了一些坑记录一下。

想要满足的需求是，从手机端上传图片至服务器，为了避免图片过大影响传输效率，需要把图片裁剪至适当大小后再传输

主要思路是，通过 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 ;