收藏
回答

wx.canvasToTempFilePath方法一直报错:fail width is 0 ?

场景:界面上有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));
                    },
                });
回答关注问题邀请回答
收藏

1 个回答

  • 会飞的鸵鸟
    会飞的鸵鸟
    2023-08-28
    关闭吧,原来是搞错了拼接小图片的时候,每个小图片的canvasToTempFilePath的调用的x,y都是0
    


    2023-08-28
    有用
    回复
登录 后发表内容