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

之前一直都在写业务类的页面，非常少接触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