场景:界面上有1-9个小canvas,有按钮触发query1-7个canvas,每个canvas会执行一次wx.canvasToTempFilePath然后进行拼接,
固定第二个canvas的canvasToTempFilePath调用会报错:wx.canvasToTempFilePath#fail(小canvas)> {"errMsg":"canvasToTempFilePath:
fail width is 0"}
打印日志宽度都是有的:
={"left":34,"top":10,"width":292,"height":439}
photo_puzzle.js:39
======canvas list====
photo_puzzle.js:72
#canvas-3-0
photo_puzzle.js:76
canvasRect> {"left":34,"top":10,"width":97,"height":439}
photo_puzzle.js:77
canvasRect> x=0;y=0
photo_puzzle.js:72
#canvas-3-1
photo_puzzle.js:76
canvasRect> {"left":131,"top":10,"width":97,"height":439}
photo_puzzle.js:77
canvasRect> x=97;y=0
photo_puzzle.js:110
wx.canvasToTempFilePath#fail(小canvas)> {"errMsg":"canvasToTempFilePath:fail width is 0"}
相关代码:
// 查询每个小canvas的尺寸参数
const query = wx.createSelectorQuery();
console.log('#canvas-' + tid + '-' + bidx);
query.select('#canvas-' + tid + '-' + bidx).fields({ node: true, rect: true, size: true }).exec((res) => {
const canvas = res[0].node;
const canvasRect = {left: res[0].left, top: res[0].top, width:res[0].width, height: res[0].height};
console.log('canvasRect> '+JSON.stringify(canvasRect));
console.log('canvasRect> x='+(canvasRect.left-boxRect.left)+';y='+(canvasRect.top-boxRect.top));
// 获取小canvas图片对象
wx.canvasToTempFilePath({
x: canvasRect.left-boxRect.left,
y: canvasRect.top-boxRect.top,
width: canvasRect.width,
height: canvasRect.height,
destWidth: canvasRect.width,
destHeight: canvasRect.height,
canvas: canvas,
success(res){
let imageSrc = res.tempFilePath;
let offCtx = offCanvas.getContext('2d');
// 将单个小图片绘制到离线canvas画布上
let image = offCanvas.createImage();
image.src = imageSrc;
image.onload = () => {
offCtx.drawImage(image,
canvasRect.left-boxRect.left,
canvasRect.top-boxRect.top,
canvasRect.width,
canvasRect.height,
);
// 绘制一张后,需要递增绘制下一张
self.setData({
offDraw: {offCanvas: offCanvas, boxRect:boxRect, bidx: bidx+1},
});
setTimeout(()=>{
self.drawPhotoEvent()
},1);
}
},
fail(res){
console.log('wx.canvasToTempFilePath#fail(小canvas)> '+JSON.stringify(res));
},
});