纯html5实现屏幕捕捉纯html5的方式实现屏幕捕捉功能。注意其中使用了可能不支持的API MediaDevices。

注意其中使用了可能不支持的API MediaDevices
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select and Capture Screenshot</title>
    <style>
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
        }

        #selectionBox {
            position: absolute;
            border: 2px dashed white;
            pointer-events: none;
        }
    </style>
</head>
<body>
<button id="startSelection">Start Selection</button>
<div id="overlay">
    <div id="selectionBox"></div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<script>
    document.getElementById('startSelection').addEventListener('click', startSelection);

    let isSelecting = false;
    let startX, startY, endX, endY;
    const overlay = document.getElementById('overlay');
    const selectionBox = document.getElementById('selectionBox');

    function startSelection() {
        isSelecting = true;
        overlay.style.display = 'block';
        overlay.addEventListener('mousedown', onMouseDown);
    }

    function onMouseDown(event) {
        startX = event.clientX;
        startY = event.clientY;
        overlay.addEventListener('mousemove', onMouseMove);
        overlay.addEventListener('mouseup', onMouseUp);
    }

    function onMouseMove(event) {
        endX = event.clientX;
        endY = event.clientY;
        updateSelectionBox();
    }

    function onMouseUp() {
        isSelecting = false;
        overlay.removeEventListener('mousemove', onMouseMove);
        overlay.removeEventListener('mouseup', onMouseUp);
        captureSelection();
    }

    function updateSelectionBox() {
        selectionBox.style.left = Math.min(startX, endX) + 'px';
        selectionBox.style.top = Math.min(startY, endY) + 'px';
        selectionBox.style.width = Math.abs(endX - startX) + 'px';
        selectionBox.style.height = Math.abs(endY - startY) + 'px';
    }

    async function captureSelection() {
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

        const width = Math.abs(endX - startX);
        const height = Math.abs(endY - startY);
        const x = Math.min(startX, endX);
        const y = Math.min(startY, endY);

        canvas.width = width;
        canvas.height = height;

        // 使用html2canvas库来捕获选定区域
        const screenshot = await html2canvas(document.body, {
            x: x,
            y: y,
            width: width,
            height: height
        });

        context.drawImage(screenshot, 0, 0);

        // 将canvas内容转换为图片数据URL
        const imgData = canvas.toDataURL('image/png');

        // 创建一个隐藏的<a>元素用于下载
        const link = document.createElement('a');
        link.href = imgData;
        link.download = 'screenshot.png';
        link.click();

        // 关闭覆盖层
        overlay.style.display = 'none';
    }

    // 引入html2canvas库
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
    document.head.appendChild(script);
</script>
</body>
</html>