QRCode 转二维码，html2canvas生成图片海报

项目场景：

使用QRCode，html2canvas技术

QRCode 转二维码，html2canvas生成图片海报并分享到微信和朋友圈和保存图片

---

1.安装QRCode

（1）安装 npm i qrcodejs2

（2）页面中引用组件

import QRCode from "qrcodejs2";

（3） 转换二维码

const qrCode = () => {
     document.getElementById("imgContainer").innerHTML = "";
     new QRCode(document.getElementById("imgContainer"), {
       text: "https://www.baidu.com",
       width: 80, //图像宽度
       height: 80, //图像高度
     });
     toImage();
   };

---

2.html2canvas生成图片海报

（1）安装html2canvas npm i html2canvas

  npm i html2canvas

（2）页面引用

  import html2canvas from "html2canvas";

（3）html

 <!-- 海报 -->
  <div class="wrapper">
    <div class="imageWrapper" ref="imageWrapper" id="capture">
      <div class="box-img">
        <img class="img" src="@/assets/images/product/zhuLi_01.jpg" alt="" />
        <div class="bg-img">
          <div id="imgContainer" class="imgContainer"></div>
          <img class="img" src="@/assets/images/product/zhuLi_02.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>

注意 如果在住页面不需要显示海报的内容，然后弹出框的时候才显示，
// 1.隐藏HTML，显示canvas的方式；
// HTML元素隐藏不能设置为display: none，或者visibility: hidden，否则绘制出的canvas为空白；可以使用 position: fixed; top:100%移出
// 隐藏HTML，因为此时元素还是显示状态，只是不在可视区域内，这样才能真正转为canvas。
设置如下：

  .wrapper {
  position: fixed;
  top: 100%;
  left: 0px;
  z-index: 0;
}

（4）js

  // 生成图片
    const toImage = () => {
      // 1，2，3张图分别用scale = 1，2，0.5 scale越小，图片越小  设置高度也可以的
      html2canvas(document.querySelector("#capture"), {
        // width: 291,
        // height: 476,
        scale: 1,
      }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");

        state.img = dataURL;
        // console.log("state.img ", state.img);
      });
    };

注意：一定要设置scale或者海报的高度，不然html2canvas转base64的时候大小就会很大，然后造成app接口返回特别的慢，就分享不出去。所以一定要设置。同意的图片，如果不设置，转换base64后图片的大小是1.3mb，如果设置，大小就是360kb 对于我项目来说。