在网上看到的总是差一点,在此记录一下自己需要的
自己的需求
有图片和文字组合展示
图片是链接,需要异步加载
只展示组合后 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; // 异步加载图片高度一定要设置好,否则会抓取不到 } }
// 部分 jsimport 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; }); } }