[Vue] The vue project uses qrcodejs2 to generate a QR code image with a log, and vue generates a QR code image with a log in the middle, and customizes the log

Series Article Directory

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

foreword

Version: Vue2
Plugin: qrcodejs2

Small demo through train

For beginners, please refer to my previous article and click on the small demo through train.

----------------------------------------Dividing line------------------------------------------------

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Install qrcodejs2

npm install qrcodejs2 --save

Two, use in the page

1. Introduce dependencies

The code is as follows (example):

<template>
	<div class="showCode">
		<div class="qrcode" ref="qrCodeDiv"></div>
		<h2>请用在***app打开扫一扫</h2>
	</div>
</template>

<script>
// 需要在页面中引入
import QRCode from 'qrcodejs2'
export default{
      
      
	components:{
      
      
		QRCode
	},
	data(){
      
      
		return{
      
      
			
		}
	}
	... 
}
</script>

2. Generate QR code method

In fact, it is very simple. I have already written

such a method in my last article.

---

These are different, what to do this time is,Generate QR code with log
log in the center

The code is as follows (example):

this.$nextTick(() => {
    
    
	let div = document.createElement('div');// 创建一个div,用来生成二维码
	// 生成二维码
	let qrcode = new QRCode(div, {
    
    
		text: '123456789', // 你的扫码内容,填网址
		width: 150, // 二维码宽度 
		height: 150, // 二维码高度
		colorDark: "#333333", //二维码颜色
		colorLight: "#ffffff", //二维码背景色
		correctLevel: QRCode.CorrectLevel.H, //从上至下生成码密度越来越高 L - M - Q - H
		// 容错率越高,越复杂
	})
	let logo = new Image();
	logo.crossOrigin = 'Anonymous';
	logo.src = require("@/assets/image/appLog.png") // 填入你本地log图片
	// 生成log图
	logo.onload = () => {
    
    
		let container = this.$refs['qrCodeDiv']; 
		// 获取页面上的div,可以使用document.querySelector()等等方法,不类推了
		if (container.innerHTML != "") {
    
    
			// 获取页面div , 有则清空已存在的
			container.innerHTML = ""
		}
		let qrImg = qrcode._el.getElementsByTagName('img')[0]; // 获取二维码
		let canvas = qrcode._el.getElementsByTagName('canvas')[0]; // 获取canvas

		let ctx = canvas.getContext("2d");
		ctx.drawImage(logo, 150 * 0.5 - 22, 150 * 0.5 - 22, 44, 44); // 写入log
		qrImg.src = canvas.toDataURL();
		container.appendChild(qrcode._el);
	}

})

To explain the principle,
it is to generate a QR code first, then generate a log graph, and then stitch the QR code and log together.
Finally assigned to the div on our page.

The content of the QR code is 123456789, please do not harmonize the management

---

Summarize

提示：这里对文章进行总结：

I found a large piece and found that there are not many tutorials, so I published one by myself. More jq generation, or not qrcodejs2

In the next article, take a screenshot of the div on the page to make a picture and save it locally.
It will be used in conjunction with generating QR codes.

The content of the QR code is 123456789, please do not harmonize the management