安装插件
npm install qrcodejs2 --save
在页面中引入
import QRcode from 'qrcodejs2'
普通的二维码
此处的id就是页面中要展示二维码容器的id
this.qrImg = new QRcode('id', {
text: "https://73476077569",//要转化成二维码的地址(一般是网址)
width: 150,//二维码宽度
height: 150,//二维码高度
colorDark: '#000000',//二维码颜色
colorLight: '#ffffff',//二维码背景颜色
});
带有图片的二维码
this.$nextTick(() => {
//和普通二维码区别在于这里需要创建一个div放置不带图片的二维码
let div = document.createElement('div');
this.qrImg = new QRcode(div, {
text: "https://sun.com/Code?sid=573476077569",
width: 150,
height: 150,
colorDark: '#000000',
colorLight: '#ffffff',
});
//加工要显示的图片
let logo = new Image();
logo.crossOrigin = 'Anonymous';
// 填入你本地log图片
logo.src = require("@/assets/logo.png")
logo.onload = () => {
//获取页面上展示二维码的容器并清空
let container = document.getElementById('grantCode');
if (container.innerHTML != "") {
// 有则清空已存在的
container.innerHTML = ""
}
//将没有图片的二维码与照片合并在一起
// 获取二维码
let qrImg = this.qrImg._el.getElementsByTagName('img')[0];
// 获取canvas
let canvas = this.qrImg._el.getElementsByTagName('canvas')[0];
let ctx = canvas.getContext("2d");
// 写入log
ctx.drawImage(logo, 150 * 0.5 - 22, 150 * 0.5 - 22, 44, 44);
//将图片转化成链接地址
qrImg.src = canvas.toDataURL();
//将生成有图片的二维码追加到页面二维码容器中
container.appendChild(this.qrImg._el);
}
})
这里是看【Vue】vue项目用qrcodejs2生成带log的二维码图片,vue生成二维码图片中间带log,自定义log_vue qrcodejs2_阿民不加班的博客-CSDN博客
这篇文章写的,cv的过程遇到以下2个问题
1.就是没有看明白在生成带有图片二维码是 是要新创建一个容器,直接使用了页面div导致清空时候再获取canvas报错
2.this.$nextTick和logo.onload是需要加上的否则就会出现,一会有图片一会没有图片