html2canvas 使用记录及注意点

在网上看到的老是差一点，在此记录一下本身须要的

本身的需求

• 有图片和文字组合展现
• 图片是连接，须要异步加载
• 只展现组合后 html2canvas 生成的图片，即抓取的 dom 结构部分要隐藏

直接上代码

下边都是 vue 模式代码，须要注意注释的地方是不能丢的

<!-- HTML 部分 -->
<div class="op">
  <div class="show-view" ref="showView">   <!-- 要抓取的 dom 部分 -->
    <p>这里是文字文字叮当的。。。。</p>
    <img src="图片地址" alt="">
  </div>
</div>
<div class="canvas-view">
  <!-- 存放生成的图片部分 -->
  <img :src="canvasSrc" alt=""> 
</div>

// css 部分
.op {
  opacity: 0;  // 要隐藏要抓取 dom 部分，只能是设置到抓取 dom 的外层元素上。
  .show-view img{
    width: 200px;
    height: 300px;   // 异步加载图片高度必定要设置好，不然会抓取不到
  }
}

// 部分 js
import html2canvas from 'html2canvas';
export default {
  data () {
    return {
      canvasSrc: ''
    }
  },
  mounted () {
    let dom = this.$refs.showView;
    html2canvas(dom, {
        useCORS: true, // 有异步加载部分，例如图片等
        scale: 2, // 设备像素比，默认是设备的 devicePixelRatio
        height: dom.clientHeight, // 生成的 canvas 部分的高度
        width: dom.clientWidth // 生成的 canvas 部分的宽度
      }).then(canvas => {
        // canvas 参数便是抓取的 show-view 部分dom生成的canvas，后边是否须要生成图片，看本身的需求
        let src  = canvas.toDataURL(); // 调用 canvas 的方法，生成图片
        this.canvasSrc = src;
      });
  }
}