呈现 HTML 文档缩略图



是否可以使用javascript获取html文档的图像。我正在寻找一个像document.getThumbnail()window.render()这样的 javascript 函数,它返回 html 文档的PNG

我可以推荐三种不同的 API:

  1. 如果您愿意运行Chrome的无头实例,则可以调用Page.captureScreenshot。(文档(和示例代码
  2. 如果您在内部作为浏览器扩展运行,则可以使用chrome.desktopCapture或 visibleCapture API。(文档(和示例代码
  3. 如果你想在计划 JS 中执行此操作,你可以使用 html2canvas,它允许你将 HTML dom 转换为画布视图,然后你可以将其导出并另存为文件。但是,屏幕截图不一定准确:

    此脚本允许您直接在用户浏览器上拍摄网页或部分网页的"屏幕截图"。屏幕截图基于 DOM,因此可能无法 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。

<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="container" style="background-color: aliceblue; max-width:400px;">
<h3>
What is Lorem Ipsum?
</h3>
<hr />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<br/>
<h3>SnapShot :</h3>
<span id="previewImage"></span>
<script>
$(document).ready(function () {
var element = $("#container");
var getCanvas;
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
</script>
</body>
</html>

最新更新