Vue中两种生成二维码（带logo）并下载方式

1.现在需要在页面中生成一个二维码，并附带上公司的logo

��       生成的二维码需要显示logo，并且点击可以二维码可以下载保存，有两种方案供选择（vue-qr、qrcode）

（）

 2.vue-qr库使用（方案一）

npm i vue-qr@4.0.9

我的nodejs版本12.13.0，大家可以使用cnpm下载更好。

html代码：

（）

JS代码：

import VueQr from 'vue-qr'export default {  name:'QR',  components:{VueQr},  data() {    return {      codeText: 'https://blog.csdn.net/yuansusu_?spm=1000.2115.3001.53',      lgoImg: require('../assets/111.png'),    };  },  methods: {    getCode(codeImg) {      console.log('二维码图片', codeImg);    },  }}

1. text是要生成的内容
2. size表示二维码的宽高，宽高一致
3. margin二维码图像的外边距, 默认 20px
4. colorDark实点的颜色
5. backgroundColor背景颜色(背景图片使用bgSrc或gifBgSrc)
6. logoSrc嵌入中间的logo地址
7. logoScale用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
8. logoMargin设置LOGO 标识周围的空白边框, 默认为0
9. callback生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)

官网文档：vue-qr - npm（文档是中文，可以放心食用）

 3.qrcode库使用并带下载方式（方案二）(推荐)

npm i qrcode@1.5.1

使用qecode配置的logo更为灵活，并且在不是vue项目中也能同样使用

html（部分）和css代码：

              保存二维码    

  .qr-code{    display: flex;    width:fit-content;    width:-webkit-fit-content;    width:-moz-fit-content;    position: relative;  }  .qr-code:hover>p{    z-index: 0;  }  .mask-code{    position: absolute;    width: 100%;    height: 100%;    background: rgba(0, 0, 0,0.4);    display: flex;    justify-content: center;    align-items: center;    cursor: pointer;    z-index: -1;  }  .mask-code i{    display: inline-block;    width: 25px;    height: 25px;    background-image: url(../assets/save_img.png);    background-size: cover;  }  .mask-code span{    color: white;  }

可以将上面的内容封装到组件中，通过props来传递想要生成的内容

JS代码：

import QRCode from "qrcode"; //引入生成二维码插件export default {  name:'CodeS',  props:{    canvasWidth:{      default:200,      type:Number    },    canvasHeight:{      default:200,      type:Number    },    url:{      default:'',      type:String,      required:true    },    logoUrl:{      default:'',      type:String,      // required:true    }  },  methods:{    getQRCode() {      let opts = {          errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例          type: "image/png",//生成的二维码类型          quality: 0.3,//二维码质量          margin: 5,//二维码留白边距          width: this.canvasWidth,//宽          height: this.canvasHeight,//高          text: "1111",//二维码内容          color: {              light: "#eaeaea"//背景色          }      };      // 将获取到的数据（val）画到msg（canvas）上,加上时间戳动态生成二维码      QRCode.toCanvas(this.$refs.canvas, this.url, opts, function (error) {        if(error){          console.log('加载失败！');        }      });    },    saveCode(){      //下载二维码      let base64Img =  this.$refs.canvas.toDataURL('image/jpg');      //创建下载标签，然后设置链接和图片名称      let a = document.createElement('a')      a.href = base64Img      a.download = '二维码'+Date.now()      a.click()      //销毁元素      a.remove()    }  },  mounted() {    this.getQRCode()    //设置logo图标    if(this.logoUrl!= ''){      let myCanvas = this.$refs.canvas      let ctx = myCanvas.getContext('2d')      // 在Canvas画布 添加图片      let img = new Image()      img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题      img.src = this.logoUrl;      img.onload = ()=>{        //第一个设置的元素，第二三是位置，后面两个是宽和高        //居中的位置计算为 （二维码宽度-img宽度）/2        let codeWidth = (this.canvasWidth *0.75)/2        let codeHeight = (this.canvasHeight * 0.75)/2        ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)      }    }  },}

errorCorrectionLevel纠错级别有四个：

1. L(7%)
2. M(15%)
3. Q(25%)
4. H(30%)

级别越高，logo占的大小就越大。

通过鼠标点击二维码，就可以将二维码保存在本地

文档地址：qrcode - npm（无中文）