名片程序的开发工作已接近尾声,下面就是生成分享了,在测试程序的时候,是类似下面的代码
let context = uni.createCanvasContext(canvasId, this);
context.drawImage("/static/images/business-card/qrcode.jpg", 50, 480, 180, 180)
当我换成动态图片的时候,发现图片加载不出来,查了网上的资料说不支持网络图片,但是uniapp的官方api上好像也没提:CanvasContext | uni-app官网 (dcloud.net.cn)
async downloadAndProcessFile(url) {
return new Promise((resolve, reject) => {
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
resolve(res.tempFilePath);
} else {
reject(new Error('File download failed'));
}
},
fail: (error) => {
reject(error);
}
});
});
},
然后在需要取图片的地方这样使用:
const avatarImagePath = await poster.downloadAndProcessFile("xxxxxxxx");
context.drawImage(avatarImagePath, 530, 40, 140, 140)