html2canvas踩坑记录

要实现清晰展示基于DOM树生成海报图片的效果，基于vue-cli开发：

<template>
  <div>
    <div class="share" ref="imageWrapper" v-show="generate">
      <div class="main">
        <div class="main__body">
          <TopCover :adimg="info.BannerUrl" :adstime="info.StartDate" :adetime="info.StartDate">TopCover>
          <div class="share__box panel" :style="{ backgroundColor: '#fff' }">
            <div class="head_box head">
              <img :src="help.HeadImage" alt="头像">
            div>
            <div class="share__title">{{help.OpenName}}邀请你助力迎好礼，扫描下方二维码div>
            <div class="share__qrcode_box share__qrcode">
              <img :src="help.QCode" alt="分享二维码">
            div>
            <div class="share__tips">长安保存图片或发送好友div>
          div>
        div>
      div>
    div>
    <div ref="selfReport">div>
  div>
template>

<script>
import TopCover from "@/components/common/TopCover";
import head from "@/assets/img/head.png";
import qrcode from "@/assets/img/qrcode.png";
import html2canvas from "html2canvas";

export default {
  name: "share",
  data() {
    return {
      head,
      qrcode,
      generate: true
    }
  },
  props: {
    info: {
      type: Object,
      default: {}
    },
    help: {
      type: Object,
      default: {}
    }
  },
  components: {
    TopCover
  },
  methods: {
    productionImage() {
        var shareContent = this.$refs.imageWrapper;
        var rect = shareContent.getBoundingClientRect(); //获取元素相对于视察的偏移量
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        // 手动创建一个 canvas 标签
        var canvas = document.createElement("canvas"); //创建一个canvas节点
        var conts=canvas.getContext("2d"); //获取context,设置scale
        var scale = 2; //定义任意放大倍数 支持小数
        conts.scale(scale, scale);    //必须先设置缩放比，再设置宽高
        canvas.width = width * scale;
        canvas.height = height * scale;
        conts.translate(0, -((window.scrollY*2)+rect.top)); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
        var opts = {
          scale: scale, // 添加的scale 参数
          canvas, //自定义 canvas
          logging: true, //日志开关，便于查看html2canvas的内部执行流程
          width: width, //dom 原始宽度
          height: height,
          useCORS: true, // 【重要】开启跨域配置
        };
        html2canvas(shareContent, opts).then((canvas) => {
          const parents = this.$refs.selfReport
          var context = canvas.getContext('2d');
          // 关闭抗锯齿
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
          // 生成img元素并赋值图片base64
          var dataUrl = canvas.toDataURL();
          var newImg = document.createElement('img');
          newImg.src = dataUrl;
          newImg.style.width = canvas.width / 2 + 'px';
          newImg.style.height = canvas.height / 2 + 'px';
          parents.insertBefore(newImg,parents.childNodes[0]);
          // 隐藏DOM结构
          this.generate = false;
        })
      },
  }
};
script>
<style lang="less" scoped>
.share {
  .share__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 106px;
    padding-bottom: 84px;
    position: relative;
  }
  .head_box {
    position: absolute;
    top: 0;
    transform: translate(0, -60%);
  }
  .share__title {
    font-size: 30px;
    color: #209bf1;
  }
  .share__qrcode_box {
    width: 268px;
    height: 256px;
    background-color: #ffffff;
    border-radius: 6px;
    margin-top: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
  }
  .share__tips {
    font-size: 20px;
    color: #333333;
    margin-top: 50px;
  }
  
}
style>