vue QRcode 生成二维码 长按保存

下载插件

npm install qrcode

引入生成二维码插件

import QRCode from "qrcode";

布局

<canvas id="QRcodeCanvas" v-show="!imgshow"></canvas><img :src="img" alt="" v-show="imgshow"  class="QRcodeImg"/>

绑定数据

return {   img:'',   imgshow:false,}

生成二维码函数

getQRCode() {    let opts = {      errorCorrectionLevel: "H",//容错级别      type: "image/png",//生成的二维码类型      quality: 0.3,//二维码质量      margin: 4,//二维码留白边距      width: 180,//宽      height: 180,//高      text: "http://www.xxx.com",//二维码内容      color: {          dark: "#333333",//前景色          light: "#fff"//背景色      }    };    this.QRCodeMsg = ""; //生成的二维码为URL地址js    let msg = document.getElementById("QRcodeCanvas");    // 将获取到的数据（val）画到msg（canvas）上    QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {        console.log(error)    });    // 将canvas转成图片格式，可以长按保存    this.img = msg.toDataURL('image/png');},