qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码

一、通过qrcodejs2生成一个二维码

粗略代码，部分代码省略。
在 view.vue 文件中，HTML部分

<template>
	<div>
		<div class="step">
			<p class="til">步骤二：对App配置服务器</p>
			<div class="step-con">
				<div class="img-box">
					<!-- 存放生成的二维码的div -->
					<div class="qrcode-config" ref="qrcode-config"></div>
					<!-- 中间的logo，通过position:absolute;定位到中间 -->
					<img class="qrcode-logo" width="27" src="@/assets/img/logo.png" alt="配置服务器">
				</div>
				<div class="desc">
					<a class="link" href="javascript:void(0)" @click.prevent="downloadImg">下载配置服务器二维码</a>
				</div>
			</div>
		</div>
		<div class="step">
			<p class="til">步骤三：登录企业帐号，开始使用</p>
		</div>
	</div>
</template>

view.vue 文件，javascript 部分

<script>
import QRcode from 'qrcodejs2';
export default {
	name: "viewPage",
	data() {
		return {}
	},
	methods:{
		// 生成二维码
		createQrcode() {
			new QRcode(this.$refs['qrcode-config'],{
				text: "wataru is the best", // 扫二维码后获得的信息
				width: 90, // 图片宽90px，左右padding各4px，边框各1px， 100-8px-2px
				height: 90, // 图片高90px，上下padding各4px，边框各1px， 100-8px-2px
			})
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.createQrcode();
		});
	}
}
</script>

view.vue 文件，scss 样式部分，设计要求二维码要有圆角边框

<style lang="scss">
/* 二维码图片容器,包括二维码 + logo + 边框 */
.img-box {
	padding-bottom: 8px;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	position: relative;
}
/* qrcodejs2 生成的二维码的容器，纯二维码*/
.qrcode-config {
	border: 1px solid #e5e5e6;
	padding: 4px;
	border-radius: 4px;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	img {
		box-sizing: border-box;
	}
}
/*二维码中间的logo*/
.qrcode-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 27px;
}
</style>

qrcodejs2生成的二维码样式：

通过加圆角边框 + logo 定位展示的二维码样式 ：

二、点击【下载配置服务器二维码】来下载二维码

1、通过canvas去绘制 边框+二维码+logo
2、通过a.download 去下载图片

1、通过canvas去绘制 边框+二维码+logo

（1）为canvas增加绘制圆角矩形的方法（canvas本身不提供）

方法参考来源： 详述Canvas(五)/绘制圆角矩形 - 作者：泥猴桃
上面文章详细讲解了坐标的计算，有兴趣的可以前去查看。
CanvasRenderingContext2D.prototype.roundRect = function(){} 这一步可以放到 this.createQrcode 或 mounted 中,在绘制canvas之前先扩展绘制圆角矩形的方法。
如果要下载的二维码不需要圆角边框 ，可以省略这一步，但是在drawQrcode方法中，context.roundRect(0, 0, 100, 100, 4).stroke();、context.fill()等要做出相应修改。

相关canvas 属性和方法 可查看以下两个链接：
1、Canvas fillRect() 方法 - W3C School
2、HTML DOM Canvas 对象 - W3C School

// 增加绘制圆角矩形的方法
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
	// x: 水平坐标轴位置，y:垂直坐标轴位置，w: 圆角矩形的宽度，h:圆角矩形的高度，r:圆角矩形的圆角半径
	if(w < 2 * r) { r = w / 2 };
	if(h < 2 * r) { r = h / 2 };
	// 起始一条路径，或重置当前路径。告诉浏览器可以开始绘制
	this.beginPath();
	// 光标移动到 x+r，y 的定位，移动到画布中的指定点，不创建线条。
	this.moveTo(x+r, y);
	// 开始画线， arcTo 创建两切线之间的弧/曲线。
	this.arcTo(x+w, y, x+w, y+h,r);
	this.arcTo(x+w, y+h, x,y+h,r);
	this.arcTo(x, y+h, x,y,r);
	this.arcTo(x, y, x+w,y,r);
	// 创建从当前点回到起始点的路径。
	this.closePath();
	// 返回 this ，可使用链式语法。
	return this;
};

（2）通过canvas绘制 圆角边框 + 二维码 + logo

了解 globalCompositeOperation 属性可以前往：HTML canvas globalCompositeOperation 属性 | 菜鸟教程

// 绘制二维码，绘制边框+生成的二维码+logo
drawQrcode(callback) {
	const image = new Image();
	const logoImage = new Image();
	// 解决跨域问题
	image.setAttribute('crossOrigin', 'anonymous');
	logoImage.setAttribute('crossOrigin', 'anonymous');
	
	// 图片加载完成后，通过canvas处理
	const canvas = document.createElement('canvas');
	const context = canvas.getContext('2d');
	
	// qrcodejs2 生成的二维码加载完成后，开始 canvas 绘制
	image.onload = function() {
		// 通过canvas绘制，canvas的宽高设置为二维码图片宽高+10px，宽/高多的10px = 左/上边框宽度1px + 左/上间距4px + 右/下间距4px + 右/下边框宽度1px
		canvas.width = image.width + 10;
		canvas.height = image.height + 10;
		// canvas 绘制线条的宽度设置为1px，线条的颜色设置为 #e5e5e6 
		context.lineWidth = 1;
		context.strokeStyle = "#e5e5e6";
		/*
			globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
			源图像 = 您打算放置到画布上的绘图。
			目标图像 = 您已经放置在画布上的绘图。
			source-over：默认。在目标图像上显示源图像。
		*/ 
		context.globalCompositeOperation = "source-over";
		context.roundRect(0, 0, 100, 100, 4).stroke(); // 绘制圆角矩形的范围
		// 圆角矩形的范围填充白色
	    context.fillStyle ="rgba(255,255,255,1)";
	    context.fill();
		// padding:4px + border:1px，4 + 1 = 5
		context.drawImage(image,5, 5, image.width, image.height); // 目标图像
		context.roundRect(0, 0, 100, 100, 4).stroke();// 源图像，重新在canvas上绘制圆角边框的线，drawImage的时候被覆盖掉了

		// 中间的logo加载完成后，绘制logo
		logoImage.onload = function() {
			// logo的宽高设置为27px，如果是想根据logo本身的宽高作为长度，可以把27换为logoImage.width，logoImage.height
			let logoX = 4 + (image.width - 27) / 2;
			let logoY = 4 + (image.height - 27) / 2;
			// 绘制logo图像，context.drawImage(logoImage,logoX, logoY, logoImage.width, logoImage.height);
			context.drawImage(logoImage,logoX, logoY, 27, 27);
			// 将绘制的图像转为data:image的格式
			let url = canvas.toDataURL('image/png');
			// 将url传到回调函数中
			callback && callback(url);
		}
		// 获取logo的src，赋值给logoImage，触发logoImage的onload方法
		var qrimglogo = document.querySelector('.qrcode-logo');
		logoImage.src = qrimglogo.src;
	}
	// 获取二维码qrimg的src，赋值给image，触发image的onload方法
	let qrimg = this.$refs['qrcode-config'].querySelector('img');
	image.src = qrimg.src;
}

2、通过a.download 去下载图片

// 下载二维码图片
downloadImg(){
	// 先用canvas绘制二维码图片
	this.drawQrcode((url) => {
		// 利用 a 标签的 download 属性去下载图片
		let a = document.createElement('a');
		// 下载图片的名称设置为“配置服务器二维码”
		a.download = "配置服务器二维码";
		a.href = url;
		// 创建一个点击事件
		const clickEvent = new MouseEvent('click');
		// 触发 a 标签的点击事件
		a.dispatchEvent(clickEvent);
	});
}

点击下载：

下载后的二维码图片：