官网：/

* 使用

1、安装：

npm install --save html2canvas

2、引入：

import html2canvas from "html2canvas"

3、将特定内容转成图片

特定内容包裹的 div 添加 ref 属性标记

<div class="container" ref="imageDom"></div>

/*** 将页面指定节点内容转为图片 */generatePicture() {html2canvas(this.$refs.imageDom).then(img => {// 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)this.imgUrl = img.toDataURL("image/png"); //可将 canvas 转为 base64 格式});}

* 踩坑

***页面有些内容不能在生成的图片内显示

之所以能够生成图片，是因为将页面指定的内容 DOM元素转成了canvas，在转换的时候，并不是所有的css属性都支持，比如：box-shadow, text-overflow:ellipsis等。

因此，图片内容出现空白的时候，建议修改css表现样式。

canvas宽高设置，跨域设置

生成的canvas宽高大小，是否允许跨域图片等，读者可参考官方文档进行相应设置：

html2canvas(this.$refs.imageDom, {width: this.$refs.imageDom.clientWidth, //dom 原始宽度height: this.$refs.imageDom.clientHeight,allowTaint: true, //允许污染taintTest: true, //在渲染前测试图片// useCORS: true, //开启跨域配置，但和allowTaint不能共存}.then(img => {});

背景默认为白色

生成的图片背景默认为白色，可以通过 backgroundColor 属性修改背景颜色，使用如下：

html2canvas(this.$refs.imageDom, {backgroundColor: null // null 表示设置背景为透明色}.then(img => {});

canvas 绘制页面自动向下偏移

在不设置scrollY 的情况下，canvas 绘制页面时会根据全局页面的滚动情况自动向下偏移：

html2canvas(this.$refs.imageDom, {scrollY: 0, scrollX: 0,}.then(img => {});

截图不全

网上好多说截图往下偏移也是因为没有设置 scrollY，scrollX 这两个属性的原因，实测有时并不能解决截图不全的问题

截图不全的问题：

原因一：

在点击保存图片时，此时要保存的资源较多，导致模块并没有完全加载完毕，就已经生成了截图。

解决方案：（延迟）

setTimeout(() => {html2canvas(this.$refs.imageDom).then(img => {});}, 200);

原因二:

滚轮滑动造成的，主要是 html2canvas 是根据 body 进行截图，若内容高度高于 body 时，就会出现这样的问题

解决方案：(在生成截图前，先把滚动条置顶)

window.pageYoffset = 0;document.documentElement.scrollTop = 0;document.body.scrollTop = 0;html2canvas(this.$refs.imageDom).then(img => {});

更多踩坑：

/h5-download.html

/slightFly/p/11828068.html