使用qrcode生产二维码长按保存发送给好友
程序员文章站
2022-03-25 11:06:57
npm install qrcode由于最近有这个业务需求，所以在度娘那里搜索了一些资料，自己整合了一下赋值下来改点东西直接就可以运行了
...
npm install qrcode
由于最近有这个业务需求，所以在度娘那里搜索了一些资料，自己整合了一下
赋值下来改点东西直接就可以运行了
<template>
<div >
<div id="QRCode"> <!-- 保存二维码的容器 -->
<div id='code'></div>
<canvas id="canvas"></canvas>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
import QRCode from 'qrcode' //引入qrcode
export default {
name: "Home",
components: {
QRCode: QRCode //引入 QRCode组件
},
data() {
return {
link:'连接',
}
},
methods:{
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;
},
},
created() {
//created页面时生产二维码
this.$nextTick (function () {
this.useqrcode(this.link);
})
}
}
</script>
<style scoped="scoped">
.share>>>img.QRCode{
-webkit-touch-callout:default;
}
</style>
本文地址：https://blog.csdn.net/weixin_44943128/article/details/109236709