小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器

时间:2024-02-24 22:19:11

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

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

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