【技术】烦死了，HTML 怎么转图片？_html转图片

前言

在用某讯浏览器时，发现遇到自己喜欢的网站除了可以网页另存为，还可以将网页保存为图片，这功能还是很不错的。Echarts 图表也提供了将图表转换为图片的功能。

近期遇到了同样的需求，领导要求每天汇报工作，工作都是通过系统统计为表格，需要截图，可是因为数据较多，图片不能一下子截全，于是迸发了这样的想法，将表格直接转换为图片。

下载脚本

本着效率的原则，决定借助互联网大法，最终选择了 HTML2CANVAS ，它是一个 JS 脚本，封装了 Canvas 组件。这个脚本在 GitHub 上进行了托管。

从 HTML2CANVAS 官网 下载脚本，导入到项目中。

官方提供了三种方式：

• Install NPM

  npm install --save html2canvas
  1

• Install Yarn

  yarn add html2canvas
  1

• 脚本导入

  http://html2canvas.hertzen.com/dist/html2canvas.min.js
  1

官网案例

• 准备要转换为图片的HTML代码

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
1
2
3

• 编写 JS 脚本

// html2canvas(element, options);
html2canvas(document.querySelector("#capture")).then(function(canvas) {
    document.body.appendChild(canvas);
});
1
2
3
4

调用 html2canvas 方法，方法有两个参数。执行函数中有一个参数canvas为<canvas></canvas>组件，将该组件直接添加到 body 中，当然也可以根据实际需求放到指定的元素中，例如：模态框等。

​ 参数一：元素对象，要转换为图片的元素对象；

​ 参数二：配置项

图片模糊

添加如下配置项：

html2canvas(document.querySelector("#capture"),{
    scale: 2, // 处理图片模糊问题
}).then(function(canvas) {
    document.body.appendChild(canvas);
});
1
2
3
4
5