通过小程序实现拍照上传功能,对于较大图片先通过canvas压缩后再上传。本地ios, android均测试通过,但是线上正式版本上传无反应,后台未接收到上传图片请求,应该是 compress2Base64这步出问题了。ios、android扫码打开体验版则可以正常上传(体验版与线上正式版本代码一模一样,域名地址均一致,域名地址也都是https,在正式版本里可以正常查看通过体验版上传的图片)。因为无日志,现在也不知道线上版本到底是哪一步有问题。请高手指点!
先压缩再上传:
base64Content = await compress2Base64(fileItem, "canvasId", this.setCanvas).catch((err) => { console.log(err); return ''})
fileItem.remoteUrl = await uploadBase64(app.globalData.userId, '/整改', base64Content)
压缩图片函数:
export function compress2Base64 (fileItem, canvasId, setCanvas) {
return new Promise((resolve, reject) => {
if (fileItem.size <= MAX_SIZE){
let base64 = 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(fileItem.url, 'base64')
resolve(base64)
} else {
wx.getImageInfo({
src: fileItem.url,
success: (res) => {
let canvasWidth = res.width;
let canvasHeight = res.height;
let ratio = 0.8;
while (canvasWidth * canvasHeight > MAX_SIZE) {
if (ratio <= 0){
break;
}
canvasWidth = Math.trunc(res.width * ratio);
canvasHeight = Math.trunc(res.height * ratio);
ratio = ratio - 0.1;
}
let quality = 0.6
// 调用setCanvas()方法设置canvas的长宽,设置完成后开始绘图,否则可能会出现"fail canvas is empty"的错误
setCanvas(canvasWidth, canvasHeight, () => {
// 获取canvasId对应的绘图上下文对象
let ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(fileItem.url, 0, 0, canvasWidth, canvasHeight);
// draw()的第一个参数为false表示不保留canvas上一次的绘制结果
// 这里设置100毫秒的延迟是为了在canvas绘图完成后再获取图片信息,否则获取到的图片可能是空白
ctx.draw(false, setTimeout(() => {
// 获取canvas绘制内容并转为图片
wx.canvasToTempFilePath({
canvasId: canvasId,
destWidth: canvasWidth,
destHeight: canvasHeight,
quality: quality, //暂时不改变图片大小,只设置图片质量
fileType: 'jpg', // 可选的参数有:jpg、png
success: res => {
// 图片导出成功后调用回调
let base64 = 'data:image/jpg;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
resolve(base64)
},
fail: err => {
reject(err)
}
})
}, 100));
});
},
fail: err => {
reject(err)
}
})
}
})
}