Vue 合成海报 解决跨域图片、截图不全问题

<template>
  <div class="container">
    <img v-if="posterDataUrl" :src="posterDataUrl" style="width: 100vw" />

    <div id="poster" v-show="!posterDataUrl" style="position: relative">
      <div class="poster-head">
        <img
          src="http://thirdwx.qlogo.cn/mmopen/Q3auHgzwzM5f0ibLPfOOK3Y6fFtGec8mYB5KkyK6jicbshegdmXgF6h96yVnB58Tmf9C2mllnXibG86rgq9xBJXlQ/132"
        />
        <h1>西木木亢向您推荐：</h1>
        <h1>高血压个体化用药基因检测</h1>
      </div>
      <img class="poster-bg" crossorigin="Anonymous" :src="`${bgsrc}?v=${Math.random()}`" />
      <img class="poster-bg" crossorigin="Anonymous" :src="`${bgsrc}?v=${Math.random()}`" />
      <!-- 阿里云图片跨域需要img需要增加crossorigin="Anonymous"   图片路径需要加上随机数，表示不从缓存取资源，不加上和Anonymous有冲突 -->
      <canvas class="poster-qr" id="qrCode-canvas" style="z-index: 1"></canvas>
    </div>
    <div class="footer">
      <img
        :src="ss"
        v-for="ss,i in list"
        @click="bgsrc= ss;set();"
        :key="i"
        width="100px"
        height="100px"
      />
    </div>
  </div>
</template>

<script>
// npm i qrcode --save
import QRCode from "qrcode";
// npm i html2canvas --save
import html2canvas from "html2canvas";

export default {
  name: "Poster",
  data() {
    return {
      posterDataUrl: "",
      list: [
        "https://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20191016093911%E4%B9%8C%E6%99%AE%E7%B4%A21.jpg",
        "https://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20190923190335%E6%AD%A6%E6%B1%89%E5%85%89%E8%B0%B7%E6%98%9F%E6%B2%B3.jpg",
        "http://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20191203180638timg.jpg",
        "http://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20191210143247O1CN016Y1PeX1PF1NQMIlkW_!!13411810.jpg",
        "https://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20191012142016%E8%B7%AF%E9%A3%9E.jpg",
        "https://zkyshipin.oss-cn-beijing.aliyuncs.com/ip/video/20191012142016%E8%B7%AF%E9%A3%9E13.jpg"
      ],
      bgsrc: ""
    };
  },
  created() {
    this.bgsrc = this.list[0];
  },
  mounted() {
    setTimeout(() => {
      this.set();
    }, 1000);
  },
  methods: {
    set() {
      this.posterDataUrl = "";
      setTimeout(() => {
        this.createQRCode();
      },2000);//延迟 让图片加载完
    },
    createQRCode() {
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, "www.baidu.com", {
        margin:2,
        width: 120,
        height: 120
      },error => {
        if (error) {
          console.log(error);
        } else {
          window.pageYOffset = 0; //解决截图不全问题
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
          html2canvas(document.getElementById("poster"), {
            useCORS: true, //（图片跨域相关）
            allowTaint: false //允许跨域（图片跨域相关）
          }).then(canvas => {
            this.posterDataUrl = canvas.toDataURL();
          });
        }
      });
    }
  }
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
}
</style>
<style scoped>
.container {
  padding-bottom: 100px;
  font-size: 0;
}
.poster-bg {
  position: relative;
  max-width: 100vw;
}
.poster-qr {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.poster-head {
  width: 100%;
  position: absolute;
  top: 50px;
  text-align: center;
  z-index: 1;
  font-size: 14px;
  color: #fff;
}
.poster-head img {
  width: 100px;
  border-radius: 50%;
}

.footer {
  z-index: 2;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  overflow-x: auto;
  background: #fff;
  white-space: nowrap;
  padding: 5px 0;
  border-top: 1px solid black;
}
</style>