html-to-image将 DOM 节点转换成图像的工具
html-to-image 是一个使用 HTML5 canvas 和 SVG 从 DOM 节点生成图像的工具。
安装
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
获取一个 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');
});
toSvg
获取 SVG 数据 URL，但过滤掉所有<i>元素：
function filter (node) {
return (node.tagName !== 'i');
}
htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {
/* do something */
});
toJpeg
保存并下载压缩的 JPEG 图像：
htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
评论