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()的使用，在小程序中這個無法回調

• 基礎庫太低了，需要升級基礎庫
• 在回調上套一層計時器，來加延遲
• 回調里面加入this
  以下代碼可以參考

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