<div id="container" style="position:relative;width:800px;height:600px;border:1px solid #000;">
  <!-- 要截图的内容 -->
</div>
<div id="selection" style="display:none;position:absolute;border:2px dashed blue;background-color:rgba(0,120,255,0.1);"></div>
<p><script>
const container = document.getElementById('container');
const selection = document.getElementById('selection');
let isSelecting = false;
let startX, startY;</p><p>container.addEventListener('mousedown', (e) => {
isSelecting = true;
startX = e.clientX - container.getBoundingClientRect().left;
startY = e.clientY - container.getBoundingClientRect().top;</p><p>selection.style.left = startX + 'px';
selection.style.top = startY + 'px';
selection.style.width = '0px';
selection.style.height = '0px';
selection.style.display = 'block';
});</p><p>document.addEventListener('mousemove', (e) => {
if (!isSelecting) return;
const currentX = e.clientX - container.getBoundingClientRect().left;
const currentY = e.clientY - container.getBoundingClientRect().top;</p><p>const width = Math.abs(currentX - startX);
const height = Math.abs(currentY - startY);
const left = Math.min(startX, currentX);
const top = Math.min(startY, currentY);</p><p>selection.style.left = left + 'px';
selection.style.top = top + 'px';
selection.style.width = width + 'px';
selection.style.height = height + 'px';
});</p><p>document.addEventListener('mouseup', () => {
if (isSelecting) {
console.log(<code>选区坐标: x=${selection.offsetLeft}, y=${selection.offsetTop}, 宽=${selection.offsetWidth}, 高=${selection.offsetHeight}</code>);
isSelecting = false;
}
});
</script></p>

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<button onclick="capture()">截图选区</button>
<p><script>
async function capture() {
const target = document.getElementById('container'); // 截图目标容器
const canvas = await html2canvas(target);</p><p>// 创建临时img用于展示截图
const img = document.createElement('img');
img.src = canvas.toDataURL();
img.style.position = 'absolute';
img.style.left = selection.style.left;
img.style.top = selection.style.top;
img.style.width = selection.style.width;
img.style.height = selection.style.height;
img.style.pointerEvents = 'none';
img.style.clipPath = <code>inset(${parseInt(selection.style.top)}px ${parseInt(canvas.width - (parseInt(selection.style.left) + parseInt(selection.style.width)))}px ${parseInt(canvas.height - (parseInt(selection.style.top) + parseInt(selection.style.height)))}px ${parseInt(selection.style.left)}px)</code>;
document.body.appendChild(img);</p><p>// 或者直接下载
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'screenshot.png';
a.click();
}
</script></p>