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;
      });
  }
}
阅读 312

推荐阅读