在用某讯浏览器时，发现遇到自己喜欢的网站除了可以网页另存为，还可以将网页保存为图片，这功能还是很不错的。Echarts 图表也提供了将图表转换为图片的功能。
近期遇到了同样的需求，领导要求每天汇报工作，工作都是通过系统统计为表格，需要截图，可是因为数据较多，图片不能一下子截全，于是迸发了这样的想法，将表格直接转换为图片。
本着效率的原则，决定借助互联网大法，最终选择了 HTML2CANVAS ，它是一个 JS 脚本，封装了 Canvas 组件。这个脚本在 GitHub 上进行了托管。
从 HTML2CANVAS 官网 下载脚本，导入到项目中。
官方提供了三种方式：
Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas
脚本导入
http://html2canvas.hertzen.com/dist/html2canvas.min.js
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!h4>
div>
// html2canvas(element, options);
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.body.appendChild(canvas);
});
调用 html2canvas 方法，方法有两个参数。执行函数中有一个参数canvas为组件，将该组件直接添加到 body 中，当然也可以根据实际需求放到指定的元素中，例如：模态框等。
参数一：元素对象，要转换为图片的元素对象；
参数二：配置项
| 参数 | 默认值 | 描述 |
|---|---|---|
| allowTaint | false | 是否允许跨域图像污染画布 |
| backgroundColor | #ffffff | 画布背景色（如果未在 DOM 中指定）。设置 null 为透明。 |
| canvas | null | 在指定 canvas 元素中绘图，不是用默认 canvas |
| foreignObjectRendering | false | 如果浏览器支持，是否使用外来对象呈现 |
| imageTimeout | 15000 | 加载图像超时（以毫秒为单位）。设置 0 禁用超时。 |
| ignoreElements | (element) => false | 从呈现中删除匹配元素。 |
| logging | true | 启用日志记录以进行调试 |
| onclone | null | 在克隆文档以进行呈现时调用的回调函数可用于修改将要呈现的内容，而不会影响原始源文档 |
| proxy | null | 用于加载跨源映像的代理的 URL。如果留空，则不会加载跨源图像。 |
| removeContainer | true | 是否清理 html2 扫描插件临时创建的克隆 DOM 元素 |
| scale | window.devicePixelRatio | 用于渲染的比例。默认为浏览器设备像素比。 |
| useCORS | false | 是否尝试使用 CORS 从服务器加载映像 |
| width | Element width | canvas 宽 |
| height | Element height | canvas 高 |
| x | Element x-offset | 裁剪画布 x 坐标 |
| y | Element y-offset | 裁剪画布 y 坐标 |
| scrollX | Element scrollX | 呈现元素时要使用的 x 滚动位置（例如，如果 元素使用position: fixed) |
| scrollY | Element scrollY | 呈现元素时要使用的 y 滚动位置（例如，如果 元素使用position: fixed) |
| windowWidth | Window.innerWidth | 呈现时要使用的窗口宽度，这可能会影响媒体查询等内容Element |
| windowHeight | Window.innerHeight | 渲染时要使用的窗口高度，这可能会影响媒体查询等内容Element |
添加如下配置项：
html2canvas(document.querySelector("#capture"),{
scale: 2, // 处理图片模糊问题
}).then(function(canvas) {
document.body.appendChild(canvas);
});