vue生成二维码并保存图片_vue实现扫描二维码

全栈程序员站长

发布于 2022-11-10 03:34:49

1.4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

一、生成简单的二维码（不带图片） 1.引入插件

npm install qrcode --save

2.页面中使用

<div id="qrcode"  class="erweima"></div>

页面中引入

import QRCode from "qrcodejs2";

methods: { 

qrcode() { 

this.$nextTick(() => { 

let qrcode = new QRCode("qrcode", { 

width: 320,
height: 320, // 高度
text: 'http://www.baidu.com', // 二维码内容
render: "canvas",   //设置渲染方式（有两种方式 table和canvas，默认是canvas）
background: "#f0f",
foreground: "#ff0",
src: this.img1, //二维码中间的图片
correctLevel: 0   // 容错率
});
});
},
mounted () { 

this.qrcode()
}

二、中间带有图片的二维码 1.引入插件

npm install vue-qr --save

2.页面使用

<vue-qr  
class="erweima"  
:logoSrc="imageSrc"    //中间图片地址
text="http://www.baidu.com"  //二维码跳转地址
:size="400"     //二维码大小
></vue-qr>

  <script>
import VueQr from 'vue-qr';
export default { 

data () { 

return { 

imageSrc:'../src/assets/logo.png',
}
},
components: { 

VueQr
},
}
</script>