qrcode.js生成二维码:
1、 安装qrcode.js:
npm install qrcode
2、 html内容:
<template>
<div id="QRCode"> <!-- 保存二维码的容器 -->
<div id='code'></div>
<canvas id="canvas"></canvas>
</div>
</template>
3、 js部分:
import QRCode from 'qrcode' //引入qrcode
export default{
data(){
return {
}
},
components: {
QRCode: QRCode //引入 QRCode组件
},
methods:{
useqrcode(url){//url是生成二维码的内容
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, url, function (error) {
if (error) console.error(error)
console.log('success!');
})
}
},
mounted(){
this.useqrcode('www.baidu.com');//调用生成二维码的方法
}
}
将canvas修改为img:
在方法useqrcode(url)中加入以下代码:
useqrcode(url){//url是生成二维码的内容
let _this = this;
let fatherQrcode = document.getElementById('QRCode');
//先清除fatherQrcode的img子节点:防止重复添加
let childs = fatherQrcode.children;
console.log(childs);
for(var i = childs .length - 1; i >= 0; i--) {
// console.log(typeof childs[i])
if(childs[i].className == "QRCode"){
fatherQrcode.removeChild(childs[i]);
}
}
//生成二维码
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, url, function (error) {
if (error) console.error(error)
console.log('success!');
//获取网页中的canvas对象转换为img
var mycanvas1=document.getElementsByTagName('canvas')[0];
mycanvas1.style.display = 'none'//隐藏生成的canvas
//将转换后的img标签插入到html中
var img=_this.convertCanvasToImage(mycanvas1);
img.classList.add("QRCode");//为img添加类名QRCode
fatherQrcode.append(img);//imagQrDiv表示你要插入的容器id
})
},
//转换为img
convertCanvasToImage(canvas) {
//新Image对象,可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
},
长按保存图片
css部分:
/* 二维码长按保存图片 */
.share>>>img.QRCode{
-webkit-touch-callout:default;
}