vue 中生成二维码，合成海报

1、分别引入 qrcodejs2、html2canvas
执行以下命令行

npm install qrcodejs2
npm install html2canvas

2、下载canvas2image，切记是下载源码至本地，不是安装
2.1、`新建canvas2image.js文件夹

var Canvas2Image = function () {
	// 这里面放canvas2image源码
}
export default Canvas2Image`

2.2、在使用的页面引入对应的文件如下：

import QRCode from "qrcodejs2";
import html2canvas from 'html2canvas';
import Canvas2Image from '@/libs/canvas2image';

如果一定要安装：canvas2image，你可以试试，会报错导致找不到对应的Canvas2Image.convertToPNG（）方法

3、DOM结构如下

<div class="main">
    <!-- 海报 html 元素 -->
    <div id="posterHtml" ref="posterHtml" >
      <div class="posterHtml">
        <!-- :src="posterHtmlBg" -->
        <img
          src="@/assets/111.jpg"
          style="width:100%;height:100%"
        >
        <div class="posterklass">我是文本,邀请您:</div>
        <!-- 二维码 -->
        <!-- <div id="qrcodeImg" v-if="postcode"></div> -->
        <div id="qrcodeImg" ></div>
      </div>
    </div>
    <div id="myCanvas" class="my_canvas"></div>
    <span class="tip">长按保存该海报，邀请好友来测！</span>
  </div>

4、执行脚本
4.1、生成二维码

createQrcode(text) {
      // 生成二维码
      const qrcodeImgEl = document.getElementById("qrcodeImg");
      qrcodeImgEl.innerHTML = "";
      let width = document.documentElement.clientWidth;
      width = width * 0.32;

      let qrcode = new QRCode(qrcodeImgEl, {
        width: width,
        height: width,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
      qrcode.makeCode(text);
      this.createPoster();
    },

4.2、合成海报

createPoster() {
      // 生成海报
      const that = this;
      // const domObj = document.getElementById("posterHtml");
      const domObj = that.$refs.posterHtml;

      var width = document.documentElement.clientWidth;
      var height = document.documentElement.clientHeight;
      var canvas = document.createElement("canvas");
      // 为了防止合成的图片失真，需要将图片扩大2倍；
      var scale = 2;
      canvas.width = width * scale;
      canvas.height = height * scale;
      // 由于合成的图片需要展示在当前页面；再将绘画的图片缩放
      canvas.getContext("2d").scale(1, 1);

      var opts = {
        scale: scale,
        canvas: canvas,
        logging: true,
        width: width,
        height: height,
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
      };
      html2canvas(domObj, opts).then(function(canvas) {
        var context = canvas.getContext("2d");
        
        // 重要 关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        var img = Canvas2Image.convertToPNG(
          canvas,
          canvas.width,
          canvas.height
        );
        // Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height)
        that.postshow = false;
        that.postcode = false;
        // img.style.width = canvas.width / 2 + "px";

        // img.style.height = canvas.height / 2 + "px";
        img.style.width = '100%';

        img.style.height = '100%';
        img.style.position = "absolute";
        img.style.top = "0px";
        img.style.left = "0px";
      
        document.getElementById("myCanvas").appendChild(img);
      
        that.$nextTick(() => {
            let e =  document.querySelector("#posterHtml");
            e.style.display = "none";

        })
      });
    }

4.2.1、生成海报注意事项：
a、创建的canvas宽高一定要记得扩大一倍；
如：

`var canvas = document.createElement("canvas");
      // 为了防止合成的图片失真，需要将图片扩大2倍；
      var scale = 2;
      canvas.width = width * scale;
      canvas.height = height * scale;`

b、为了展示在当前手机屏幕中，（合成图片自适应）；
需要将图片缩放。如：

// 由于合成的图片需要展示在当前页面；再将绘画的图片缩放
      canvas.getContext("2d").scale(1, 1);