vue使用 vueQr，html2canvas 实现批量生成二维码并合成海报

开始

npm install vue-qr --save   // 安装依赖

 //使用
  // 1. 页面引入组件
 import vueQr from "vue-qr";
 
  components: {
    vueQr,
  },
 // 2. 使用组件
 	// :logoSrc  二维码中间logo图标
 	// :text     二维码内容 如：https://www.baidu.com?data:sss
 	// :size     生成的二维码大小，我这里没用到 可以直接用css修改样式
		<vue-qr
          class="create-qr"
          :logoSrc="logo"
          :text="item.qrcodeRequestUrl"
          :style="{height:item.qrcodeY+'px',width:item.qrcodeX+'px',left:item.bannelQrcodeX+'px',top:item.bannelQrcodeY+'px'}"
        ></vue-qr>

需求：后端返回数据（海报底图，二维码内容）

首先需要先渲染出底图以及生产二维码，将二维码放入指定位置，最后再将dom转为图片，方便用户保存出图片

配置项： 海报底图，
			二维码内容（item.qrcodeRequestUrl），
			二维码大小（长、宽） （qrcodeY，qrcodeX），
			二维码X,Y轴偏移距离（就是我们用定位二维码时，top跟left的值） （bannelQrcodeX，bannelQrcodeY）

//因为 html2canvas 是将dom转成图片的 所以咱们需要先展示一下  等生成好图片后再v-if隐藏掉
<div v-if="!isOK">
      <div
      style='position: relative;'
        class="create-box"
        :ref="`imageDom${index}`"
        :id="`imageDom${index}`"
        v-for="(item, index) in bannerImg"
        :key="index"
      >
        <img :src="item.bannerImageUrl"   />
        <vue-qr
          class="create-qr"
          :logoSrc="logo"
          :text="item.qrcodeRequestUrl"
          :style="{height:item.qrcodeY+'px',width:item.qrcodeX+'px',left:item.bannelQrcodeX+'px',top:item.bannelQrcodeY+'px'}"
        ></vue-qr>
      </div>
    </div>

// 后端返回数据会有多张，注意v-for的时候 dom 的ref不能写死（id），因为咱们用html2canavas获取dom的时候才不会有问题

// 图片不需要写啥样式 自动他撑开就行，给v-for的盒子加上定位，子绝父相，再给二维码定位住,

就是为了把码放进那个白框里

created() { 
	//接口获取数据
    getQrCode(this.$route.query.index == "1" ? "0" : "").then((res) => {
      this.bannerImg = res.data.data;
     
     //务必！务必！！务必！！！务必！！！！务必！！！！！ 
     //这块要写在created()里边
      this.$nextTick(() => {
        setTimeout(() => {
          this.bannerImg.forEach((item, index) => {
            this.saveImg("imageDom" + index, index);
          });
        }, 1000);
        setTimeout(() => {
          this.isOK=true  //因为咱们转成海报后就直接展示海报了 那这块就不需要在现实了
          this.loading = false; //关闭loading ，给个加载感觉更牛逼嘿嘿
        }, 1000);
      });
    });
  },
  
methods:{
	saveImg(val, index) {
      console.log(val);
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val); //传入的id名称
      // console.log("node", node);
      console.log(node);
      var width = node.offsetWidth; //dom宽
      var height = node.offsetHeight; //dom高
      var scale = 1; //放大倍数 这个相当于清晰度 调大一点更清晰一点
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: "null", //背景颜色 为null是透明
        dpi: window.devicePixelRatio * 0.5, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
        scrollY: 0,
        allowTaint: false,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true, //是否允许跨域图像污染画布  !!!
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.$set(this.bannerImg[index], "base", url);
      });
    },
}