最近在写微信小程序 canvas的上传图片功能趟过了一些坑记录一下。
想要满足的需求是从手机端上传图片至服务器,为了避免图片过大影响传输效率需要把图片裁剪至适當大小后再传输
主要思路是,通过wx.chooseImage()函数获得图片的文件路径在canvas画板获得文件路径后,重新绘制成制定大小的图片再通过canvasToTempFilePath(),生成新的文件路径最后通过wx.uploadFile()上传到指定服务器
一,在canvas中绘制的单位都是px但由于不同屏幕的像素比不同,在小程序 canvas中样式我们使用的单位是rpx所以茬canvas中就需要把rpx换成对应的px;由于rpx可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx所以rpx换算成px的公式是:
这一点在小程序 canvas的官方文档也有讲箌:
所以例如在样式中你的canvas宽度650rpx,那么在canvas中绘制使用的宽度就是:(屏幕宽度 / 750)* 650 ;