2023-07-31 uniapp用canvas绘制图片时报错:getImageInfo:fail invalid ==》图片加载失败,请使用不受保护的图片路径

发布时间 2023-07-31 13:51:04作者: 哎呦你可棒棒了
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抛出的,原因是你所引用的图片受到保护无法被加载所以才导致图片无法绘制从而不显示;

解决方案:使用不受保护的图片路径。