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

前言

在用某讯浏览器时，发现遇到自己喜欢的网站除了可以网页另存为，还可以将网页保存为图片，这功能还是很不错的。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
  

官网案例

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

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

• 编写 JS 脚本

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

调用 html2canvas 方法，方法有两个参数。执行函数中有一个参数canvas为<canvas></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);
});