html-to-image：将 HTML 网页转化成图片的库
html-to-image => Generates an image from a DOM node using HTML5 canvas and SVG：该项目可以将任意 DOM 节点，转换成 SVG、PNG、JPEG 等多种格式的图像，可直接在 React 和原生 JavaScript 代码中使用。
html-to-image 安装
npm install --save html-to-image
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');
html-to-image 所有顶级函数都接受 DOM 节点和渲染选项，并返回一个用相应的 dataURL：
- toPng
- toSvg
- toJpeg
- toBlob
- toCanvas
- toPixelData
html-to-image toPng
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);
});
html-to-image 获取 PNG 图像 base64 编码的数据 URL 并下载
html-to-image 下载，使用的是 download 库:
npm install downloadjs
bower install downloadjs
require("downloadjs")(data, strFileName, strMimeType);
html-to-image toPng download:
htmlToImage.toPng(document.getElementById('my-node'))
.then(function (dataUrl) {
download(dataUrl, 'my-node.png');
});
html-to-image 扩展阅读：
- html-to-image
- montage 命令
- feh 命令
- html-to-image：将 HTML 网页转化成图片的库
- wkhtmltopdf 命令
- weasyprint 命令
- HTML 更改 ul、li 前面小圆点的颜色
- ul 命令
- wkhtmltopdf 命令详解
- CSS 自适应字体两边增加横线