头本精
头本精
  • 发布:2025-08-31 14:09
  • 更新:2025-08-31 23:00
  • 阅读:72

【报Bug】drawImage绘制getImageInfo获取的path不展示

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Window 10

HBuilderX类型: 正式

HBuilderX版本号: 4.76

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

基础库版本号: 3.9.2

项目创建方式: HBuilderX

示例代码:
canvasSize: uni.upx2px(313) + 55, // 增加边距  
canvasScale: 3,  
dotArry:[{img:http://xxxxxxx.png}]  
async drawBracelet() {  
            try {  
                this.ctx = uni.createCanvasContext('braceletCanvas', this);  

                // 设置Canvas尺寸  
                const canvasSize = this.canvasSize;  
                const center = canvasSize / 2;  
                const diameter = uni.upx2px(parseFloat(this.contentSize));  
                const radius = diameter / 2;  

                // 清空画布  
                this.ctx.clearRect(0, 0, canvasSize, canvasSize);  

                // 绘制背景圆形  
                this.ctx.beginPath();  
                this.ctx.arc(center, center, radius, 0, Math.PI * 2);  
                this.ctx.fillStyle = 'transparent';  
                this.ctx.fill();  
                this.ctx.strokeStyle = '#dcdcdc';  
                this.ctx.lineWidth = 1;  
                this.ctx.stroke();  

                console.log('绘制背景圆形');  
                // 加载所有图片信息  
                const imageTasks = this.dotArry.map((item) => {  
                    return new Promise((resolveImg) => {  
                        uni.getImageInfo({  
                            src: item.img,  
                            success: (res) => {  
                                console.log('下载图片成功', res);  
                                resolveImg({ path: res.path, item });  
                            },  
                            fail: () => {  
                                console.error('加载图片失败:', item.img);  
                                resolveImg(null); // 即使失败也resolve,避免Promise.all中断  
                            }  
                        });  
                    });  
                });  
                const images = await Promise.all(imageTasks);  
                console.log('加载所有图片信息', images);  

                // 绘制每个珠子 - 修改后的逻辑  
                for (let i = 0; i < images.length; i++) {  
                    const { path, item } = images[i];  
                    const width = uni.upx2px(parseFloat(this.dotwidth1(item)));  
                    const height = uni.upx2px(parseFloat(this.dotheight(item)));  
                    const rotation = (item.rotate * Math.PI) / 180; // 转换为弧度  

                    this.ctx.save();  

                    // 移动到画布中心  
                    this.ctx.translate(center, center);  

                    // 应用旋转  
                    this.ctx.rotate(rotation);  

                    // 应用垂直平移(对应DOM中的translateY(calc(-${contentSize}/2)))  
                    this.ctx.translate(0, -radius);  

                    // 应用水平翻转(如果scaleX为-1)  
                    if (item.scaleX === -1) {  
                        this.ctx.scale(-1, 1);  
                    }  

                    // 应用垂直翻转(对应DOM中的scaleY(-1))  
                    this.ctx.scale(1, -1);  

                    console.log('绘制珠子', path);  
                    // 绘制图片(调整位置使图片中心对齐)  
                    this.ctx.drawImage(path, -width / 2, -height / 2, width, height);  

                    this.ctx.restore();  
                }  
                // 等待绘制完成  
                await new Promise((resolve) => {  
                    this.ctx.draw(false, () => {  
                        setTimeout(resolve, 3000); // 增加一点延迟确保绘制完成  
                    });  
                });  
                console.log('等待Canvas绘制完成');  
                // 导出图片  
                const { tempFilePath } = await new Promise((resolve, reject) => {  
                    uni.canvasToTempFilePath({  
                        canvasId: 'braceletCanvas',  
                        fileType: 'png',  
                        quality: 1,  
                        width: canvasSize,  
                        height: canvasSize,  
                        destWidth: canvasSize * this.canvasScale,  
                        destHeight: canvasSize * this.canvasScale,  
                        success: resolve,  
                        fail: reject  
                    });  
                });  
                console.log('导出图片', tempFilePath);  
                // 上传图片  
                const { url } = await upFile(tempFilePath);  

                return url;  
            } catch (error) {  
                console.error('绘制手链失败:', error);  
                throw new Error('生成图片失败: ' + error.message);  
            }  
        },

操作步骤:

-

预期结果:

ios 和 安卓 均可正常绘制

实际结果:

安卓绘制的没有图片

bug描述:

循环使用getImageInfo获取网络图片的临时路径使用drawImage绘制,

在iOS设备上正常,在安卓设备上绘制的图片不展示,只显示绘制的圆圈

2025-08-31 14:09 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

测试一下原生微信小程序是否也有这个问题

要回复问题请先登录注册