html-to-image：将 HTML 网页转化成图片的库

该项目可以将任意 DOM 节点，转换成 SVG、PNG、JPEG 等多种格式的图像，可直接在 React 和原生 JavaScript 代码中使用。

安装

npm install –save html-to-image

使用

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';

/* ES5 */
var htmlToImage = require('html-to-image');

所有顶级函数都接受 DOM 节点和渲染选项，并返回一个用相应的 dataURL 履行的承诺：

• toPng
• toSvg
• toJpeg
• toBlob
• toCanvas
• toPixelData

请看以下示例。

toPng 转Png

获取 PNG 图像 base64 编码的数据 URL 并立即显示它：

var node = document.getElementById(‘my-node’);

htmlToImage.toPng(node)

.then(function (dataUrl) {

var img = new Image();

img.src = dataUrl;

document.body.appendChild(img);

})

.catch(function (error) {

console.error(‘oops, something went wrong!’, error);

});

获取 PNG 图像 base64 编码的数据 URL 并下载它（使用 download）：

htmlToImage.toPng(document.getElementById(‘my-node’))

.then(function (dataUrl) {

download(dataUrl, ‘my-node.png’);

});