html-to-image 是一个库，可以将任意 DOM 节点转换为矢量（SVG）或光栅（PNG 或 JPEG）图像，用 JavaScript 编写。它基于Paul Bakaus 的 domvas 并已完全重写，修复了一些错误并添加了一些新功能（如网络字体和图像支持）。
在github上的地址在这里。
安装
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');
Options参数
filter:以DOM节点为参数的函数。如果传递的节点应包含在输出中，则应返回true。排除节点意味着也排除它的子节点。
(domNode: HTMLElement) => boolean
例子：
const filter = (node: HTMLElement) => {
const exclusionClasses = ['remove-me', 'secret-div'];
return !exclusionClasses.some((classname) => node.classList?.contains(classname));
}
htmlToImage.toJpeg(node, { quality: 0.95, filter: filter});
//或者
htmlToImage.toPng(node, {filter:filter})
backgroundColor：背景颜色的字符串值，任何有效的CSS颜色值。
width：渲染前要应用于节点的宽度（以像素为单位）。
height：渲染前要应用于节点的高度（以像素为单位）。
canvasWidth：允许将画布的大小（包括内部元素）缩放到给定的宽度（以像素为单位）。
canvasHeight：允许将画布的大小（包括内部元素）缩放到给定的高度（以像素为单位）。
style：要在渲染之前将其属性复制到节点样式的对象。您可能需要检查此引用中CSS属性的JavaScript名称。
quality：介于0和1之间的数字，表示JPEG图像的图像质量（例如0.92=>92%）。
cacheBust：设置为true可将当前时间作为查询字符串附加到URL请求以启用缓存破坏。
includeQueryParams：设置false以使用所有URL作为缓存密钥。如果该值具有falsy值，它将从提供的URL中排除查询参数。
等等具体的见github。
html-to-image方法
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 并下载
htmlToImage.toPng(document.getElementById('my-node'))
.then(function (dataUrl) {
download(dataUrl, 'my-node.png');
});
tosvg
获取 SVG 数据 URL，但过滤掉所有元素：
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();
});
toBlob
获取 PNG 图像 blob 并下载
htmlToImage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
if (window.saveAs) {
window.saveAs(blob, 'my-node.png');
} else {
FileSaver.saveAs(blob, 'my-node.png');
}
});
toCanvas
获取一个 HTMLCanvasElement，并立即显示它：
htmlToImage.toCanvas(document.getElementById('my-node'))
.then(function (canvas) {
document.body.appendChild(canvas);
});
toPixelData
以Uint8Array 形式获取原始像素数据，每 4 个数组元素代表一个像素的 RGBA 数据：
var node = document.getElementById('my-node');
htmlToImage.toPixelData(node)
.then(function (pixels) {
for (var y = 0; y < node.scrollHeight; ++y) {
for (var x = 0; x < node.scrollWidth; ++x) {
pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
/* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
});
React
import React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';
const App: React.FC = () => {
const ref = useRef<HTMLDivElement>(null)
const onButtonClick = useCallback(() => {
if (ref.current === null) {
return
}
toPng(ref.current, { cacheBust: true, })
.then((dataUrl) => {
const link = document.createElement('a')
link.download = 'my-image-name.png'
link.href = dataUrl
link.click()
})
.catch((err) => {
console.log(err)
})
}, [ref])
return (
<>
<div ref={ref}>
{/* DOM nodes you want to convert to PNG */}
</div>
<button onClick={onButtonClick}>Click me</button>
</>
)
}
