当前位置：首页 > JavaScript

js实现截图

2026-04-03 23:21:24JavaScript

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，可以将网页元素转换为Canvas图像。它支持大部分CSS属性，能够生成高质量的截图。

安装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');
});

使用Canvas API手动截图

对于简单的需求，可以直接使用Canvas的drawImage方法实现截图功能。

const captureElement = document.getElementById('element-to-capture');
const canvas = document.createElement('canvas');
canvas.width = captureElement.offsetWidth;
canvas.height = captureElement.offsetHeight;
const ctx = canvas.getContext('2d');

// 使用foreignObject将HTML内容绘制到Canvas
const data = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">${captureElement.innerHTML}</div>
    </foreignObject>
</svg>`;

const img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    const screenshot = canvas.toDataURL('image/png');
};
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(data);

使用WebRTC实现屏幕截图

对于需要截取用户屏幕或特定窗口的场景，可以使用WebRTC的getDisplayMedia API。

async function captureScreen() {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            video: { mediaSource: 'screen' }
        });
        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.toDataURL('image/png');
    } catch (err) {
        console.error('Error:', err);
    }
}

使用第三方服务实现截图

对于需要后端支持的截图服务，可以考虑使用以下方案：

Puppeteer无头浏览器：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'screenshot.png' });
    await browser.close();
})();

截图保存与下载

生成截图后，通常需要提供下载功能：

js实现截图

function downloadImage(dataUrl, filename) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = filename || 'screenshot.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 使用示例
html2canvas(document.body).then(canvas => {
    downloadImage(canvas.toDataURL('image/png'), 'page-screenshot.png');
});