vue生成海报

npm install vue-qr --save
npm install qrcodejs2 --save
npm install  html2canvas --save
在项目下载依赖

 <div>
    <div style="display: none" id="my_qrcode" class="qrcode"></div>
    <!--海报-->
    <div class="Canvas">
      <canvas id="myCanvas" width="100%" height="100vh"></canvas>
    </div>
    <img :src="dataURL" alt="" class="modalImg" @click="download()" />
</div>

在页面引入
import VueQr from "vue-qr";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      my_qrcode: "",
      dataURL: "",
    };
  },
  methods: {
    // 二维码生成  参数参考官方文档
    makeQRcode() {
      let t = this;
      t.my_qrcode = new QRCode("my_qrcode", {
        width: 196,
        height: 196,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L,
        text: "http://sino-sources.com/dist5/index.html#/",
      });
    },
    // 创建二维码对象
    qr() {
      let img = new Image();
      img.src = this.my_qrcode._oDrawing._elCanvas.toDataURL(); // 获取64图  测的安卓、ios都可以
      return img;
    },
    // 海报生成
    poster() {
      let t = this;
      let c = document.getElementById("myCanvas"); // 画板id
      //尺寸
      c.width = 900;
      c.height = 1600;
      let ctx = c.getContext("2d");
      let qr = t.qr(); //二维码图片对象
      let img = new Image(); // 背景图对象
      var base64 = ""; //base64
      //引入线上背景图可能存在跨域问题,解决：
      img.setAttribute("crossOrigin", "anonymous");    
      img.crossOrigin = "Anonymous";
        img.src =
          "xxxxxx.png"; // 背景图路经
      img.setAttribute("crossOrigin", "Anonymous");
      img.onload = function () {
        ctx.drawImage(img, 0, 0); // 背景图载入画板
        ctx.drawImage(qr, 660, 1340); // 二维码图载入画板  后面是定位参数
        base64 = c.toDataURL("image/png");
        t.dataURL = base64;   //由于画布绘制需要时间，所以需要在之后执行，不然赋值的dataURL有值，但打开是白屏
      };
    },
  },
  mounted() {
    this.makeQRcode();
    this.poster();
  },