m***@163.com
m***@163.com
  • 发布:2023-09-11 17:06
  • 更新:2023-09-11 17:41
  • 阅读:397

【报Bug】uniapp开发的微信小程序、app中canvas绘制海报安卓端微信小程序绘制不完整

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win 11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

第三方开发者工具版本号: 1.06.2308291

基础库版本号: 3.0.1

项目创建方式: HBuilderX

示例代码:
<canvas id="shareposter" canvas-id="shareposter"></canvas>  

renderImage() {  
            const ctx = uni.createCanvasContext('shareposter', this);  
            let drawList = [  
                {  
                    bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao1.png',  
                    // bg:'https://q-bwc.oss-cn-shanghai.aliyuncs.com/share/tg_haibao1.png',  
                    name: {  
                        x: 50,  
                        y: 237,  
                        fontSize: 14,  
                        color: '#fff'  
                    },  
                    headerImage: {  
                        x: 13,  
                        y: 232,  
                        r: 14  
                    },  
                    qrcode: {  
                        x: 21.5,  
                        y: 287,  
                        w: 92,  
                        h: 92,  
                        r: 10  
                    }  
                },  
                {  
                    bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao2.png',  
                    name: {  
                        x: 176,  
                        y: 55,  
                        fontSize: 14,  
                        color: '#fff'  
                    },  
                    headerImage: {  
                        x: 141,  
                        y: 50,  
                        r: 14  
                    },  
                    qrcode: {  
                        x: 219,  
                        y: 218,  
                        w: 81,  
                        h: 81,  
                        r: 10  
                    }  
                },  
                {  
                    bg: 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/xcx/static/image/newuser/tg_haibao3.png',  
                    name: {  
                        x: 57,  
                        y: 260,  
                        fontSize: 14,  
                        color: '#fff'  
                    },  
                    headerImage: {  
                        x: 19.5,  
                        y: 253,  
                        r: 16  
                    },  
                    qrcode: {  
                        x: 25,  
                        y: 334,  
                        w: 60,  
                        h: 60,  
                        r: 10  
                    }  
                }  
            ];  
            return new Promise(async (resolve, reject) => {  
                let w = 330;  
                let h = 428;  

                ctx.clearRect(0, 0, w, h);  
                ctx.setFillStyle('rgba(255, 255, 255, 0)');  
                ctx.fillRect(0, 0, w, h);  
                // 绘制背景  
                console.log(1);  
                ctx.save();  
                await this.drawImageS(ctx, drawList[0].bg, 0, 0, w, h);  
                console.log(2);  
                // 绘制头像  
                let headerImage = drawList[0].headerImage;  
                await this.circleImgOne(ctx,'https://thirdwx.qlogo.cn/mmopen/vi_32/VKUdRdM9ib6YYReTuZpQe6gSTK5vDTeqicicKtd8X15o3Q70LCVg5NLjwicjYQJIFXTEEk2L7699ROd9u3nxPESEwQ/132', headerImage.x, headerImage.y, headerImage.r);  
                let qrCode = drawList[0].qrcode;  
                console.log(3);  
                // 绘制文字  
                let name = drawList[0].name;  
                ctx.setFontSize(name.fontSize);  
                ctx.setFillStyle(name.color);  
                ctx.setTextAlign('left');  
                ctx.setTextBaseline('top');  

                ctx.fillText('测试', name.x, name.y);  
                // 绘制二维码  

                await this.circleImgTwo(ctx, 'https://q-bwc.oss-cn-shanghai.aliyuncs.com/share/64db45561026f.png', qrCode.x, qrCode.y, qrCode.w, qrCode.h, qrCode.r);  

                ctx.draw(true, () => {  
                    setTimeout(() => {  
                        console.log('完毕');  
                        resolve(true);  
                    }, 100);  
                });  
            });  
        },  
async circleImgOne(ctx, img, x, y, r) {  
            ctx.save();  
            ctx.beginPath();  
            let d = r * 2;  
            let cx = x + r;  
            let cy = y + r;  
            ctx.arc(cx, cy, r, 0, 2 * Math.PI);  
            ctx.clip();  
            // ctx.drawImage(img, x, y, d, d);  
            await this.drawImageS(ctx, img, x, y, d, d);  
            // ctx.restore();  
        },  
        async circleImgTwo(ctx, img, x, y, w, h, r) {  
            if (w < 2 * r) r = w / 2;  
            if (h < 2 * r) r = h / 2;  
            ctx.save();  
            ctx.beginPath();  
            ctx.moveTo(x + r, y);  
            ctx.arcTo(x + w, y, x + w, y + h, r);  
            ctx.arcTo(x + w, y + h, x, y + h, r);  
            ctx.arcTo(x, y + h, x, y, r);  
            ctx.arcTo(x, y, x + w, y, r);  
            ctx.closePath();  
            ctx.clip();  
            // ctx.drawImage(img, x, y, w, h);  
            await this.drawImageS(ctx, img, x, y, w, h);  

            // ctx.restore();  
        },  
        drawImageS(ctx, url, x, y, w, h) {  
            console.log(url);  
            return new Promise((resolve, reject) => {  
                uni.downloadFile({  
                    url: url,  
                    success(res) {  
                        console.log(res);  
                        ctx.drawImage(res.tempFilePath, x, y, w, h);  
                        ctx.restore();  
                        setTimeout(() => {  
                            console.log('成功了');  
                            resolve(true);  
                        }, 100);  
                    },  
                    fail(err) {  
                        console.log('失败了');  
                        reject(false);  
                    },  
                    complete() {  
                        console.log('下载晚了');  
                    }  
                });  
            });  
}

操作步骤:

直接调用代码绘制即可

预期结果:

所有端正常绘制

实际结果:

安卓端的微信小程序绘制不完整

bug描述:

uniapp开发了微信小程序和app,有个分享海报的功能,在app端正常,微信小程序中ios端正常,安卓端部分图片画不出来。

2023-09-11 17:06 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

可以试试使用微信原生看看是什么样的结果,看你问题描述可能是微信原生绘制有问题

  • m***@163.com (作者)

    在开发工具中以及ios端的微信小程序中都正常绘制。就安卓微笑小程序里有问题

    2023-09-11 17:50

  • DCloud_UNI_LXH

    回复 m***@163.com: 使用微信原生试试看,有没有同样的问题

    2023-09-11 18:00

  • m***@163.com (作者)

    回复 DCloud_UNI_LXH:今天使用了微信的绘图api,现在正常了,微信那边已经抛弃旧版本api了。采用新的api。uniapp这边应该是还没兼容到

    2023-09-12 11:08

  • DCloud_UNI_LXH

    回复 m***@163.com: 应该是可以直接使用的

    2023-09-13 16:29

要回复问题请先登录注册