- 当前 Bug 的表现
canvasA、canvasB,在canvasB中进行无规则裁剪操作,使用canvasToTempFilePath API把canvasB指定区域的内容导出生成指定大小的图片,将导出的图片使用drawImage API绘制到canvasA中,再使用drawImage API绘制一张图片到canvasA中,两次都使用draw(true)进行绘制,最后使用canvasToTempFilePath API把canvasA指定区域的内容导出生成指定大小的图片。
// 将裁剪画布内容保存
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 320,
height: 320,
destWidth: 320,
destHeight: 320,
canvasId: 'clipCanvas',
success: res => {
//清洗相框画布
//frameCanvas.clearRect(0, 0, 320, 320);
console.log('裁剪图:'+res.tempFilePath);
// 绘制裁剪图到相框画布
frameCanvas.drawImage(res.tempFilePath, 0, 0, 320, 320);
frameCanvas.draw();
// 绘制相框图到相框画布
console.log('相框图:'+this.data.framePic);
frameCanvas.drawImage(this.data.framePic, 0, 0, 320, 320);
frameCanvas.draw(true);
// 保存相框画布内容为图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 320,
height: 320,
destWidth: 320,
destWidth: 320,
canvasId: 'frameCanvas',
success: res => {
console.log('合成图:'+res.tempFilePath);
// 关闭裁剪层,更新数据
this.setData({
clipImagePath: res.tempFilePath,
isClip: false
});
// 将裁剪图绘制到产品上
this.drawClipImageToGoods();
}
}, this);
}
}, this);
真机测试iOS和Android都没有问题,开发工具有问题。
.draw() 是异步的, 在draw()的回调函数里面保存图片
将第二次绘制不放在第一次绘制的回调中,保证图片放在第二次绘制的回调中,最后看画布结果没问题,但是第二次绘制回调不执行。
最后只能在第一次绘制回调中执行第二次绘制,再在第二次绘制回调中保存图片,这样就解决了。刚开始根据你的提示在第二次绘制的回调中保存图片没成功就没试,只能先忙别的了,非常感谢。
麻烦提供下代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html