uniapp小程序canvas海报生成的问题

在一些项目中，使用uniapp前端生成海报是避免不了的，从中也遇到了一些坑。（同理在微信小程序也可以使用的原生）

1. 遇到最大的坑还是图片生成问题CanvasContext.drawImage；

• canvas是不可以通过网络图片来生成的，可以使用下面的api来缓存到本地；
  uni.getImageInfo({})
• 也是不支持bease64来生成，在做项目时候后端生成太阳码返回了的是baes64不能直接使用，在官方里找到了一个方法是缓存bease64为本地域名，以下可以封装成Promise公共组件；

base64Save(base64File) { //base64File 需要加前缀
	const fsm = wx.getFileSystemManager();
	let extName = base64File.match(/data\:\S+\/(\S+);/)
	if (extName) {
		extName = extName[1]
	}
	let fileName = Date.now() + ‘.‘ + extName
	return new Promise((resolve, reject) => {
	      let filePath = wx.env.USER_DATA_PATH + ‘/‘ + fileName
	      fsm.writeFile({
	            filePath,
	            data: base64File.replace(/^data:\S+\/\S+;base64,/, ‘‘),
	            encoding: ‘base64‘,
	            success:(res)=>{
	                  resolve(filePath);
                    },
	            fail() {
		          reject(‘生成失败‘);
	            },
	      });
      });
}

需要用到的.vue页面，引入以下代码

this.base64Save(res.data).then(data => {
    // console.log(‘这是你需要的参数返回‘,data) 
});

2.draw()的使用，在小程序中这个无法回调
（1）基础库太低了，需要升级基础库
（2）在回调上套一层计时器，来加延迟
（3）回调里面加入this
以下代码可以参考

setTimeout(() => {
      ctx.draw(false,(res) => {
		console.log(‘生成成功‘)
      }, this)
}, 300)

原文：https://www.cnblogs.com/jia-95/p/14278874.html