npm install qrcodejs2 --save
这里的效果可以实现在安卓或者苹果手机支持长按功能扫描。
html
<div id="qrcode" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;display: none"></div>
<img :src="src" class="qrcode_img" style="width: 151px;height:151px;z-index: 4;" >
一开始我没有用img,在安卓手机不能长按识别出来,就苹果可以。 然后呢, 按我写法就可以了。 原理就是用拿到插件生成img 的 src 赋值到img就可以。
script
import QRCode from "qrcodejs2"
export default {
data() {
return {
code_data: ‘恭喜您,获取神兽朝里一枚!哈哈哈哈‘, // 接二维码的变量
src: ‘‘,
}
},
methods: {
// 生成二维码
qrcode () {
let that = this;
let qrcode = new QRCode(‘qrcode‘, {
width: 151,
height: 151, // 高度
text: this.code_data, // 二维码内容
// render: ‘canvas‘ , // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: ‘#f0f‘, // 背景色
// foreground: ‘#ff0‘ // 前景色
})
setTimeout(()=>{
var mycanvas1=document.getElementsByTagName(‘canvas‘)[0];
//将转换后的img标签插入到html中
var img=this.convertCanvasToImage(mycanvas1);
},300)
},
convertCanvasToImage(canvas) {
//新Image对象,可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
this.src = canvas.toDataURL("image/png")
return image;
},
},
mounted() {
this.$nextTick (function () {
this.qrcode();
})
this.get_stamps()
this.wx_share()
},
components: {
},
}
原文:https://www.cnblogs.com/dashaxiong/p/12218298.html