微信小程序碼生成及canvas繪制

吐槽：某廠的開發文檔寫的跟屎一樣

1、后台返回accessToken，小程序請求獲取小程序碼

uni.request({
	url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.accessToken,
	method: 'POST',
	headers: {
		'Content-Type': 'json'
	},
	responseType: 'arraybuffer',
	data: {							
		"scene": "a=1", // 參數
		"is_hyaline": true //透明底色
	},
	success: (res) => {
		// 將返回的圖片buffer生成圖片，並保存至臨時用戶文件中
		const fs = wx.getFileSystemManager();
		const FILE_BASE_NAME = 'code';
		let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
		fs.writeFileSync(filePath, res.data)
		// filePath就是圖片的本地路徑
		that.filePath = filePath
		that.qrcode(filePath)
	},
	fail(e) {
		console.log(e)
	}
});

2、將生成的小程序碼繪制到海報上 --- canvas

	let that = this
	const query = wx.createSelectorQuery()
	query.select('#myCanvas')
		.fields({
		node: true,
		size: true
		})
		.exec((res) => {
						
			const canvas = res[0].node
			const ctx = canvas.getContext('2d')

			const headerImg = canvas.createImage();
			const backImg = canvas.createImage();

			headerImg.src = that.filePath;
			backImg.src = '../../static/wish.png';

             backImg.onload = () => {
				ctx.drawImage(backImg, 0, 0, 150, 100)
			}	

			headerImg.onload = () => {
				ctx.drawImage(headerImg, 0, 0, 150, 100)
			}											
	})
				

3、將生成的小程序碼繪制到海報上 --- canvas離屏繪制

// 創建離屏 2D canvas 實例
				const canvas = wx.createOffscreenCanvas({
					type: '2d',
					width: 300,
					height: 150
				})
				// 獲取 context。注意這里必須要與創建時的 type 一致
				const context = canvas.getContext('2d')
				// 創建一個圖片
				const image = canvas.createImage()
				// 等待圖片加載

				image.src = '../../static/wish.png' // 要加載的圖片 url
				image.onload = () => {
					// 把圖片畫到離屏 canvas 上
					context.clearRect(0, 0, 300, 150)
					context.drawImage(image, 0, 0, 300, 150)

					// 獲取畫完后的數據
					const imgData = context.getImageData(0, 0, 300, 150)
					console.log(imgData)
                                        // 圖片的base64格式
					console.log(context.canvas.toDataURL())
					that.src = context.canvas.toDataURL()
				}

END