• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序navigateTo转参注意二点。JSON.stringify(object),JSON.parse(String),enco ...发布时间:2022-07-18
下一篇:
小程序原理发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap