开源地址：https://github.com/niklasvh/html2canvas
该脚本允许您直接在用户浏览器上对网页或部分网页进行“截图”。截图是基于DOM的，因此可能不是100%准确的真实的表示，因为它没有制作实际的截图，而是基于页面上可用的信息构建截图。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML to Image Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
<div id="content">
<!-- 这里是你想要生成图片的HTML内容 -->
<h1>Hello World</h1>
<p>这是一个例子。</p>
</div>
<button onclick="convertToImage()">生成图片</button>
<script>
function convertToImage() {
html2canvas(document.querySelector("#content")).then(canvas => {
// 创建一个图片元素
var img = new Image();
// 将canvas转换为DataURL格式的图片
img.src = canvas.toDataURL("image/png");
// 将图片添加到DOM中以便查看
document.body.appendChild(img);
});
}
</script>
</body>
</html>该脚本通过阅读DOM和应用于元素的不同样式，将当前页面呈现为画布图像。
它不需要服务器的任何渲染，因为整个图像都是在客户端的浏览器上创建的。然而，由于它严重依赖于浏览器，这个库不适合在nodejs中使用。它也不会神奇地规避任何浏览器内容策略限制，因此渲染跨源内容将需要一个代理将内容获取到同一个源。
该脚本仍处于非常实验性的状态，因此我不建议在生产环境中使用它，也不建议开始使用它构建应用程序，因为仍然会有重大的更改。
浏览器兼容性
该库应该在以下浏览器上工作正常（使用 Promise polyfill）：
Firefox 3.5+
谷歌Chrome
Opera 12+
IE9+
Safari浏览器6+
由于每个CSS属性都需要手动构建才能支持，因此有许多属性尚未支持。
