微信小程序码生成及canvas绘制

本文主要是介绍微信小程序码生成及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()
				}

这篇关于微信小程序码生成及canvas绘制的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！