当前位置：首页 > JavaScript

js实现截图功能

2026-03-01 05:13:08JavaScript

使用HTML2Canvas库实现截图

HTML2Canvas是一个流行的JavaScript库，可以将网页中的特定元素或整个页面转换为Canvas图像，从而实现截图功能。

安装HTML2Canvas库：

npm install html2canvas

基本使用示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
    document.body.appendChild(canvas);
    // 或者保存为图片
    const image = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = image;
    link.click();
});

使用Canvas API实现区域截图

对于简单的区域截图，可以直接使用Canvas API：

function captureArea(element) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = element.offsetWidth;
    canvas.height = element.offsetHeight;

    ctx.drawImage(element, 0, 0, canvas.width, canvas.height);

    return canvas;
}

// 使用示例
const imgElement = document.getElementById('image-to-capture');
const canvas = captureArea(imgElement);
document.body.appendChild(canvas);

浏览器原生Screen Capture API

现代浏览器支持Screen Capture API，可以捕获屏幕、窗口或标签页内容：

async function captureScreen() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { width: 1920, height: 1080 }
        });
        const videoTrack = stream.getVideoTracks()[0];
        const imageCapture = new ImageCapture(videoTrack);
        const bitmap = await imageCapture.grabFrame();

        const canvas = document.createElement('canvas');
        canvas.width = bitmap.width;
        canvas.height = bitmap.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(bitmap, 0, 0);

        return canvas;
    } catch (err) {
        console.error('Error:', err);
    }
}

实现全屏截图

结合HTML2Canvas和全屏捕获：

function captureFullPage() {
    return html2canvas(document.body, {
        scrollY: -window.scrollY,
        scrollX: -window.scrollX,
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight
    });
}

注意事项

跨域资源可能导致Canvas污染，需要确保所有资源同源或配置CORS
某些CSS属性可能无法正确渲染到Canvas中
大页面截图可能导致性能问题，建议分块处理
浏览器扩展可能干扰截图过程

移动端截图实现

对于移动端设备，可以使用相同的HTML2Canvas方法，但需要注意触摸事件和视口设置：

function mobileCapture() {
    const options = {
        scale: 2,  // 提高分辨率
        useCORS: true,
        allowTaint: true
    };

    html2canvas(document.body, options).then(canvas => {
        // 处理生成的canvas
    });
}

以上方法提供了从简单到复杂的多种截图实现方案，可根据具体需求选择适合的方法。

js实现截图功能