编程那点事编程那点事

专注编程入门及提高
探究程序员职业规划之道!

uniapp drawImage 加载网络图片

名片程序的开发工作已接近尾声,下面就是生成分享了,在测试程序的时候,是类似下面的代码

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)
未经允许不得转载: 技术文章 » uniapp drawImage 加载网络图片