标签：150 canvas const filePath 微信 context res 绘制

吐槽：某厂的开发文档写的跟屎一样

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()
				}

标签：150,canvas,const,filePath,微信,context,res,绘制
来源： https://www.cnblogs.com/wuliaoyuan/p/15824424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。