H5 活动利用Canvas把用户信息和二维码合并到图片内。

最新推荐文章于 2025-06-25 19:45:00 发布

原创

最新推荐文章于 2025-06-25 19:45:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #Canvas

本文介绍了如何在H5活动中利用Canvas技术将用户信息和二维码结合到测试结果图片上。在实现过程中，作者遇到canvas不支持rem单位的问题，最终找到解决方案，即按照设计图原始尺寸进行绘制，无需动态调整宽高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直都在写业务类的页面，非常少接触canvas，最近公司要出一个测试类的H5活动页面，需要在用户完成测试后把用户输入的资料和二维码合并在测试结果图中。

其中有个坑，就是canvas是不能使用rem单位的，所以开头我就打算动态取页面中img的宽度来进行2倍图的绘画，结果掉进了这个坑里非常烦恼，然后突然想到其实只要按设计给你的图片的原先尺寸进行绘画就行了，并不需要动态进行宽高设置。

下面是实现代码：

vue框架:

import QRCode from 'qrcode'   // 二维码生成

export default {
   
   
	....moreCode,
	methods: {
   
   
		async getImg(){
   
   
			let imgbox = this.$refs.imgbox;  // 获取页面上的img
			let img = new Image();  
	     	let qImg = new Image