vue中使用qrcode生成二维码并设置样式去掉白边，并下载canvas生成的图像

可以达到的效果：

1.生成二维码
2.去掉qrcode的边框（建议留1px；否则浏览器识别有些困难）；
3.设置样式，例如qrcode的宽度和高度

装依赖

npm install qrcode

view中使用

<template>
	<canvas id="baseCanvas"></canvas>
</template>

script中使用

import QRCode from 'qrcode';
mounted(){
  this.useqrcode();
  
},
 methods: {
    useqrcode:function(){
      let canvas = document.getElementById('baseCanvas'); //找到cancas的id
      let webUrl = localUrl + "joinH5.html?id=" + this.matchData.id;	//定义要生成的内容
      //{width:88,height:88,margin:1} 这个地方就是设置样式的地方
      QRCode.toCanvas(canvas, webUrl,{width:88,height:88,margin:1}, function (error) {
        if (error) console.error(error)
        console.log('success!');
      })
    },
 }

下载canvas生成的图像

1.把canvas转变成base64；
2. 再转成图片；

_downloadQrcode: function(){
    let cans = document.getElementById("baseCanvas");
    let type = 'png';   //设置下载图片的格式
    let img_png_src = cans.toDataURL("image/png");  //将canvas保存为图片
    let imgData = img_png_src.replace(this._imgType(type),'image/octet-stream');
    let filename = '图片' + '.' + type; //下载图片的文件名
    this._saveFile(imgData,filename);
  },

_imgType:function(ty) {
      let type = ty.toLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
  },

_saveFile:function(data, fileName){
   let save_link = document.createElement('a');
     save_link.href = data;
     save_link.download = fileName;

     let event = document.createEvent('MouseEvents');
     event.initEvent("click", true, false);
     save_link.dispatchEvent(event);
 },

参考地址:node-qrcode
HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】