我试图使用 JavaScript/JQuery 截取网页的屏幕截图。你能解释一下我需要遵循的代码步骤吗？
如何使用 Javascript/JQuery 截取当前网页的屏幕截图？
IT技术
javascript
webpage-screenshot
2021-02-15 19:24:47
2个回答
该html2canvas2的JavaScript工具是适合于拍摄网页的屏幕截图。您必须使用三个 JavaScript 库：
1.jquery-1.10.2.min.js
2.html2canvas.js
3.jquery.plugin.html2canvas.js
然后调用函数 capture()，它将在新窗口中为您提供基于 HTML5 画布的屏幕截图。它还生成图像的 base64data 值。它仅适用于支持 HTML5 画布的浏览器。
<script type="text/javascript">
function capture() {
html2canvas($('body'),{
onrendered: function (canvas) {
var imgString = canvas.toDataURL("image/png");
window.open(imgString);
}
});
</script>
在这里，使用 html2canvas 截取网页截图。
例子
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<h1>Take screenshot of webpage with html2canvas</h1>
<div class="container" id='container'>
<h1>Devnote is a tutorial.</h1>
</div>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<!-- Script -->
<script type='text/javascript'>
function screenshot() {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
}
</script>
</body>
</html>
输出：
