记录在vue项目中使用html2canvas生成海报

先介绍一下html2canvas。

html2canvas是一个JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。

因为每个浏览器渲染页面的方式都不尽相同，所以生成的图片也不太一样。

下面我们来介绍一下我再项目中是如何使用它生称图片的。

这是ui给的设计图，下面是我的代码。

下面是我的html部分的代码，因为这个页面是写在后台的，写在所以有些样式写成了内联，请忽略，哈哈。

    <van-overlay :show="isShowPopup" z-index="1111111" class="overlay-box">
      <div class="overlay">
        <div class="canvans-box" v-if="firstFlag">
          <div ref="canvans" class="canvans-container">
            <div class="canvans-img">
              <img src="../../assets/imgs/swiper_img.png" class="img-box" />
            </div>
            <div class="canvans-detail">
              <van-row>
                <van-col span="5">
                  <div>
                    <img src="../../assets/imgs/activityImgs/img1.png" />
                  </div>
                </van-col>
                <van-col span="9">
                  <div>一刚</div>
                  <div>邀请您一起抢</div>
                </van-col>
                <van-col span="10">
                  <div>
                    <qrcode-vue :value="erweimaLink" :size="32" class="erweima-logo"></qrcode-vue>
                    <div class="text">扫二维码,参与活动</div>
                  </div>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div
          v-show="!isDrawPoster"
          style="position: absolute;width: 100%;color: #FFFFFF;margin-top: 250px;text-align: center;font-size: 12px;"
        >海报生成中......</div>
        // 生成的海报所在的容器
        <div id="poster-img" v-show="isDrawPoster"></div>
      </div>

      <icon-font
        type="iconjiantou2"
        style="position: absolute;top: 50px;left: 300px;font-size: 40px;"
      ></icon-font>
      <p
        class="shareDesc"
        style="font-size: 12px;position: absolute;bottom: 190px;color: #fff;text-align: center;width: 100%;"
      >
        请长按图片保存，或者点击上方按钮“
        <icon-font type="icongengduo"></icon-font>”进行分享
      </p>

      <div @click.stop="isShowPopup = false" class="iconfont">
        <em class="qb-icon">&#xe62d;</em>
      </div>
    </van-overlay>

这是海报生成的方法。

    productionImage() {
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas");
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      let canvasBox = this.$refs.canvans;
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width);
      const height = parseInt(window.getComputedStyle(canvasBox).height);
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2;
      canvas.height = height * 2;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";

      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
        useCORS: true, //允许图片跨域
        allowTaint: true, //允许加载跨域的图片
        tainttest: true, //检测每张图片都已经加载完成
        // foreignObjectRendering: true,
        scrollX: 0,
        scrollY: 0,
      };
      html2canvas(canvasBox, options).then((canvas) => {
        // 解决生成图片不完整的问题,在图片生成前，先把滚动条置顶
        window.pageYoffset = 0;
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
        // toDataURL是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，
        // 该字符串可直接作为图片路径地址填入标签的src属性当中
        let oImg = new Image();
        oImg.src = canvas.toDataURL("image/png"); // 导出图片
        oImg.onload = function () {};
        oImg.style.width = "100%";
        var poster = document.getElementById("poster-img");
        poster.appendChild(oImg);
        this.firstFlag = false;
      });
    },

点击按钮的toShare事件，显示遮罩层，和并生成海报。

    toShare() {
      // 拿到二维码生成的链接
      // this.erweimaLink = infoShare.link;
      // 更新分享信息
      // wxUpdateShare(infoShare.title, infoShare.desc, infoShare.link, infoShare.image);
      this.isShowPopup = true;
      var that = this;
      setTimeout(() => {
        // 生成海报
        this.productionImage();
        // 展示海报
        setTimeout(() => {
          that.isDrawPoster = true;
        }, 2000);
      }, 500);
    },

toShare方法中有段代码，

// 展示海报
        setTimeout(() => {
          that.isDrawPoster = true;
        }, 2000);

我强调这块是因为，这个代码有个bug，打开海报，首先看到你用css写的海报样式，然后html2canvas插件生成的截图才出来，就会有一个变动的过程。所以我将css写的海报用position定位，挪到了屏幕之外，然后加延时器让生成的海报在2000ms之后再展示出来。这样它变动的过程就看不出来了。
这只是我的不成熟的解决问题的办法，如果有大佬有更好的办法，希望指教。