vue 使用html2canvas将本地二维码图片 添加不同法人背景图 例如 收款二维码一样 并且本地下载

fm有话说：

首先： 导入依赖 npm install html2canvas --save
再导入这个 这个是生成二维码的依赖 不过我这里没有用生成 的二维码 是本地的二维码
npm install qrcanvas --save

上代码

      <el-dialog title="导出二维码" :visible.sync="dialogCode">
    <div class="el-row">
      <div class="el-col-12 text-center">
        <el-form ref="form" label-width="80px">
          <el-form-item>
            <el-radio-group v-model="color" @change="handleColor">
              <el-radio label="red">红色模板</el-radio>
              <el-radio label="blue">蓝色模板</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="download">
              <i class="el-icon-download" />
              下载
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="el-col-12">
        <div class="www" ref="box">
          <img :src="bgColor" alt="背景图" class="bg">

          <div id="qrcode" >
             <img class="red" :src="image"  alt="">
          </div>
        </div>
      </div>
    </div>
   </el-dialog>

import { qrcanvas } from 'qrcanvas';
import html2canvas from 'html2canvas';

  return {
       color: 'red',
       bgColor: require("@/assets/image/red.jpg"),
       image:"",
       }

  methods: {
   handleColor:function () {
      this.bgColor = require("@/assets/image/"+this.color+".jpg")
    },
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    },
    //导出图片
    deexport(code){

      this.dialogCode=true;
      this.image=code;
    },


     download: function (){
      var that = this;
      html2canvas(that.$refs.box).then(function(canvas) {
        let link = document.createElement('a')
        link.href = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))
        link.download = 'qrCode.png'
        link.click()
        setTimeout(() => {
           that.dialogCode=false;
            that.dialogTableVisible=false;
        }, 1000);

      });
    },

  }

我这里的red.jpg 和blue.jpg 是本地的背景图 然后二维码是从数据获取到的 没有生成二维码 并且图片会存在跨域的问题 我这里是后端解决的 后端加了一个base64的字段 直接就可以本地下载了

如果想看到生成二维码 并且本地下载 看这个链接https://www.cnblogs.com/zyulike/p/10288469.html