2023-07-31 uniapp用canvas绘制图片时报错:getImageInfo:fail invalid 或者 errMsg: "getImageInfo:fail file not found" ==》图片加载失败,确认你使用的图片路径是否满足条件

methods: {
        drawPoster() {
            const ctx = uni.createCanvasContext('canvas', this);

            // 设置字体样式
            ctx.setFontSize(20);
            ctx.setTextAlign('center');
            ctx.setTextBaseline('middle');

            // 设置文本颜色
            ctx.setFillStyle('#000000');

            // 绘制文本
            ctx.fillText('这是一个海报', 100, 100);

            // 加载图片
            uni.getImageInfo({
                src: 'https://www.foodiesfeed.com/wp-content/uploads/2023/06/vegan-curry-with-fresh-herbs.jpg',
                success: function (res) {
                    // 绘制图片
                    ctx.drawImage(res.path, 100, 100, 200, 200);

                    // 绘制完成并将内容渲染到画布上
                    ctx.draw();
                },
                fail: function (err) {
                    console.error('图片加载失败', err);
                }
            });
        
        }
    }

问题是由uni.getImageInfo抛出的,原因是你所引用的图片路径没有满足一下条件才无法被加载所以才导致图片无法绘制从而不显示;

解决方案:

需要满足条件:

1.你用的图片路径为网络图片;

2.该网络图片路径域名已添加在小程序的白名单(downloadFile);

注:

如果已添加域名到download白名单,而开发者工具且没有显示可尝试重启;

我使用了本地图片也报图片加载失败。

 

posted @ 2023-07-31 13:36  叶乘风  阅读(1927)  评论(0编辑  收藏  举报