📅 最后修改于: 2023-12-03 14:51:55.425000 🧑 作者: Mango
在开发中，我们可能需要截取指定元素的屏幕截图，本文将介绍如何使用 JavaScript 截取 div 的屏幕截图。
html2canvas 是一个将网页DOM渲染成canvas的JavaScript库。我们可以使用它截取指定元素的屏幕截图。
使用 npm 安装 html2canvas 库：
npm install html2canvas
创建一个 html 文件，引入 html2canvas 库：
<html>
<head>
<title>使用 html2canvas 截取 div 屏幕截图</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
<div id="capture">
<h4>Hello World!</h4>
<p>This is a div we want to capture.</p>
</div>
<button id="btn_capture" type="button">Capture</button>
<br />
<img id="img_capture" />
<script>
document.getElementById('btn_capture').addEventListener('click', function() {
html2canvas(document.getElementById('capture')).then(function(canvas) {
document.getElementById('img_capture').src = canvas.toDataURL();
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个 div 元素，并使用 html2canvas 库截取这个 div 的屏幕截图。我们还创建了一个按钮，并使用 JavaScript 监听这个按钮的 click 事件。当用户点击按钮时，我们使用 html2canvas 库生成画布，然后将画布转换为 base64 编码的图片并显示在页面上。
我们还可以使用 window.scrollTo() 和 window.innerWidth/window.innerHeight 来截取 div 的屏幕截图。
<html>
<head>
<title>使用 window.scrollTo() 和 window.innerWidth/window.innerHeight 截取 div 屏幕截图</title>
</head>
<body>
<div id="capture">
<h4>Hello World!</h4>
<p>This is a div we want to capture.</p>
</div>
<button id="btn_capture" type="button">Capture</button>
<br />
<img id="img_capture" />
<script>
document.getElementById('btn_capture').addEventListener('click', function() {
var div = document.getElementById('capture');
var scrollX = window.scrollX;
var scrollY = window.scrollY;
var x = div.offsetLeft - scrollX;
var y = div.offsetTop - scrollY;
var w = div.offsetWidth;
var h = div.offsetHeight;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawWindow(window, x, y, w, h, 'rgb(255,255,255)');
document.getElementById('img_capture').src = canvas.toDataURL();
});
</script>
</body>
</html>
在这个例子中，我们创建了一个 div 元素，并使用 window.scrollTo() 和 window.innerWidth/window.innerHeight 截取这个 div 的屏幕截图。我们还创建了一个按钮，并使用 JavaScript 监听这个按钮的 click 事件。当用户点击按钮时，我们获取 div 元素的位置和大小，并使用 drawWindow() 方法将整个窗口绘制到画布上，然后将画布转换为 base64 编码的图片并显示在页面上。
以上就是如何使用 JavaScript 截取 div 的屏幕截图的介绍。