在前端领域，生成图片是一项比较常见的需求。而使用 html-to-image 这个 npm 包可以让我们很方便地将 HTML 页面转化为图片格式，其使用方式简单明了。本文将详细介绍 html-to-image 的安装和使用，希望对开发者们有所帮助。
安装
使用 npm 安装 html-to-image：
npm install html-to-image
使用
html-to-image 有两个主要的方法：toPng 和 toJpeg，分别用于将 HTML 代码转换成 PNG 或 JPEG 格式的图片。
我们首先需要获取要转换成图片的 HTML 元素的节点对象，代码如下：
const node = document.getElementById('id-of-your-element');toPng()
将 HTML 元素转换成 PNG 格式的图片，并以 data-uri 的形式返回图片数据。
-- -------------------- ---- -------
------ ----------- ---- ----------------
-----------------------
-------------- --------- -
--- --- - --- --------
------- - --------
-------------------------------
--
--------------- ------- -
---------------------- -------
---代码解析：
首先引入我们安装好的
html-to-image包。调用
toPng方法，并传递我们要转换的 HTML 元素节点对象node作为参数。成功转换后，
toPng方法会返回一个Promise，在then函数内获取到dataUri所表示的图片数据。最后新建一个图片对象
img，将dataUri赋值给img.src，并将图片插入到页面中。若转换过程中出现了错误，则通过
catch函数捕获并进行相应的错误处理。
toJpeg()
将 HTML 元素转换成 JPEG 格式的图片，并以 data-uri 的形式返回图片数据。
-- -------------------- ---- -------
------ ----------- ---- ----------------
------------------------
-------------- --------- -
--- --- - --- --------
------- - --------
-------------------------------
--
--------------- ------- -
---------------------- -------
---代码解析与 toPng() 方法相似，唯一不同的是调用了 toJpeg() 这个方法。
附加选项
除了在转换图形格式上，html-to-image 还提供了许多其它的使用选项，来处理或修改生成的图片。这里仅展示其中的一部分：
-- -------------------- ---- -------
----------------- -
------ -
---------- -----------
------------------- ---- ------
----------- -------
--
------- -------- --------- -
------ --------------- --- ----
--
------ ----
------- ----
----------- -
--
-------------- --------- -
--- --- - --- --------
------- - --------
-------------------------------
--
--------------- ------- -
---------------------- -------
---代码解析：
style：指定转换后图片的样式。此处使用的是transform和background样式，对生成的图片进行相应的变换和背景颜色的设定。filter：用于剔除不需要的元素。此处使用的是一个回调函数，返回页面元素是否需要加入到生成的图片中，根据元素的标签名来进行简单的标记；若标签名为i，则不需要加入到生成的图片中。width和height：指定生成的图片的宽和高。pixelRatio：指定生成的图片的像素密度。
注意：html-to-image 不支持跨域请求，所以需要将要转换的 HTML 元素相对页面的路径定位正确，否则会出现跨域请求的错误。
实例
下面是一个简单的示例，通过 html-to-image 将 HTML 页面转换成 PNG 格式的图片：
-- -------------------- ---- -------
------ ----------- ---- ----------------
-- --------- ---- ----
----- ---- - --------------------------------------
-- -- ----- --- ---- ----- --- -------
-----------------------
-------------- --------- -
-- ----------------- --- --- --- - --- --
--- --- - --- --------
------- - --------
-- ---------
-------------------------------
--
--------------- ------- -
-- ----
---------------------- -------
---总结
本文简单地介绍了使用 html-to-image 这个 npm 包将 HTML 页面转换成图片的方法。我们可以在这个基础上，通过添加自定义的样式和选项，来生成自己想要的图片格式。希望本文能够帮助到大家，同时也希望大家能够在开发中体验到更多的乐趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4dbb5cbfe1ea061136f