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(); });
评论