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抛出的,原因是你所引用的图片受到保护无法被加载所以才导致图片无法绘制从而不显示;
解决方案:使用不受保护的图片路径。