用原生 JavaScript 和 Canvas 实现网页截图：从底层原理到下载 | 极客日志

JavaScript

用原生 JavaScript 和 Canvas 实现网页截图：从底层原理到下载

使用原生 JavaScript 的 Canvas 和 SVG foreignObject 技术，可以无需依赖第三方库实现网页截图与下载。文章从底层原理出发，详细拆解了 DOM 捕获、离屏 Canvas 后台渲染、长页面滚动拼接、跨域与内存处理等关键环节，并给出了一个完整的无依赖截图函数。方案轻量可控，适合报表导出、错误截图等场景。

樱花落尽发布于 2026/6/23更新于 2026/9/435 浏览

有过这样的时刻吗？用户盯着数据报表问'能保存整页吗'，或者你调试时想截取滚动区域，发现截图工具不好使。这种场景下，如果页面自己能生成高清快照，会省事很多。

我不想引入 html2canvas 那种几百 KB 的库，也不想依赖后端。所以动手用纯 JavaScript 打通了这条链路：DOM → Canvas → 图像 → 下载。没有第三方依赖，每个环节都搞清楚了为什么这么干、坑在哪里。

浏览器每天把 HTML、CSS 翻译成像素，我们要做的就是再要一份副本。核心思路很直接：拿目标元素的结构和样式 → 转成可绘制图像源（SVG + foreignObject）→ 画进 Canvas → 导出文件。但每一步都有细节要处理，比如 Retina 屏上的模糊、跨域图片的安全限制、长页面拼接的断层，下面一步步说。

Canvas：画布的事先准备

截图需要一块画布，前端就是 <canvas>。通常动态创建，避免 HTML 里写死：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas); // 旧浏览器可能需要挂载
canvas.style.display = 'none'; // 隐藏，不影响布局

虽然现代浏览器允许未挂载的 canvas 操作，为了兼容性还是短暂插入再隐藏。display: none 不影响绘图能力，但能防止意外重排。

要特别注意：canvas.width 和 canvas.height 是物理像素，而 CSS 里的 style.width/height 是显示尺寸。两者不匹配图像就会拉伸模糊——所以设置宽高用属性，控制显示用样式。

拿到画笔（渲染上下文）：

const ctx = canvas.getContext('2d', { willReadFrequently: true, alpha: true });

willReadFrequently 提示浏览器你会频繁调用 getImageData()，让它采用更优的内存策略；alpha: true 保留透明通道，这对带透明背景的 Logo 或阴影效果很重要。这个 ctx 是独立作用域，多个 canvas 互不干扰，方便并行处理图像片段。

graph TD
A[创建 Canvas 元素] --> B{是否已挂载？}
B -->|否 | C[appendChild 至 body]
B -->|是 | D[调用 getContext('2d')]
D --> E[返回 CanvasRenderingContext2D]
E --> F[开始绘图操作]
F --> G[应用样式、绘制路径、图像等]

注意 getContext() 只能在主线程用，Web Worker 里拿不到。这引出了性能优化的关键——离屏 Canvas。

离屏 Canvas：把重活丢给后台线程

如果要截的不是一小块，而是整张长页面，包含大量 SVG、渐变、阴影，主线程可能卡住。用户正输入文字，页面突然冻两秒，体验很糟。

OffscreenCanvas 就是为这个准备的。它允许在 Web Worker 中创建和操作 canvas：

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// main.js
const offscreen = new OffscreenCanvas(800, 600);
const ctx = offscreen.getContext('2d');
worker.postMessage({ canvas: offscreen }, [offscreen]); // transfer 控制权

// worker.js
self.onmessage = function(e) {
    const { canvas } = e.data;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 800, 600);
    canvas.commit(); // 提交帧到主线程显示
};

特性	传统 Canvas	OffscreenCanvas
所属线程	主线程	Web Worker
是否阻塞渲染	是	否
是否可 transfer	否	是（via postMessage）
是否支持 toDataURL	否	需转 ImageBitmap 再编码

sequenceDiagram
participant Main as 主线程
participant Worker as Web Worker
participant GPU as GPU 渲染管线
Main->>Worker: postMessage({ task: 'render', data: domSnapshot })
Worker->>Worker: 创建 OffscreenCanvas
Worker->>Worker: 执行分块绘制
Worker->>Main: postMessage(ImageBitmap)
Main->>GPU: ctx.drawImage(bitmap, 0, 0)

async function captureInWorker(domString) {
    const offscreen = new OffscreenCanvas(1000, 1500);
    const ctx = offscreen.getContext('2d');
    const svgUrl = createSvgDataUrl(domString);
    const img = await loadImage(svgUrl);
    ctx.drawImage(img, 0, 0);
    return offscreen.transferToImageBitmap();
}
function createSvgDataUrl(html) {
    return `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><foreignObject>${encodeURIComponent(html)}</foreignObject></svg>`;
}

const rect = element.getBoundingClientRect();
console.log({ x: rect.left, y: rect.top, width: rect.width, height: rect.height });

function isFixedElement(el) {
    const style = window.getComputedStyle(el);
    return style.position === 'fixed';
}
const elements = Array.from(document.querySelectorAll('*'))
    .filter(el => !isFixedElement(el));

function getElementAbsolutePosition(el) {
    const rect = el.getBoundingClientRect();
    return {
        x: rect.left + window.pageXOffset,
        y: rect.top + window.pageYOffset,
        width: rect.width,
        height: rect.height
    };
}

属性	是否含溢出内容	典型用途
`clientWidth`	❌ 不含	获取可视区域宽度
`offsetWidth`	✅ 含	获取元素总占位宽
`scrollWidth`	✅ 含	检测是否有水平滚动

if (container.scrollWidth > container.clientWidth) {
    console.log('存在水平溢出，需横向分片截取');
}

async function captureLongPage(element, canvas) {
    const { height } = element.getBoundingClientRect();
    const ctx = canvas.getContext('2d');
    const dpr = window.devicePixelRatio || 1;
    const viewportHeight = window.innerHeight * dpr;
    canvas.height = height * dpr;
    canvas.width = element.offsetWidth * dpr;
    ctx.scale(dpr, dpr);
    const originalTop = window.pageYOffset;
    let capturedHeight = 0;
    while (capturedHeight < height) {
        window.scrollTo(0, capturedHeight);
        await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
        ctx.drawImage(
            offscreenCanvas,
            0, Math.max(0, -originalTop + capturedHeight) * dpr,
            canvas.width, viewportHeight,
            0, capturedHeight * dpr,
            canvas.width, viewportHeight
        );
        capturedHeight += viewportHeight / dpr - 50; // 重叠 50px 防断裂
    }
    window.scrollTo(0, originalTop);
}

function createSvgDataUrl(element) {
    const svgString = `
        <svg xmlns="http://www.w3.org/2000/svg">
            <foreignObject>
                <body xmlns="http://www.w3.org/1999/xhtml">
                    ${element.outerHTML}
                </body>
            </foreignObject>
        </svg>`;
    return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString);
}

function getFullStyles() {
    const styles = [];
    for (let sheet of document.styleSheets) {
        try {
            if (sheet.cssRules) {
                const rules = Array.from(sheet.cssRules).map(r => r.cssText).join('');
                styles.push(`<style>${rules}</style>`);
            }
        } catch (e) {
            console.warn("无法读取样式表:", sheet.href);
        }
    }
    return styles.join('');
}

// 大图用 toDataURL 会生成数 MB 的 Base64 字符串，内存压力大
const base64 = canvas.toDataURL('image/png');

// toBlob 返回 Blob，内存友好，推荐
canvas.toBlob(function(blob) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'screenshot.png';
    a.click();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
}, 'image/png');

方法	数据格式	内存占用	适用场景
`toDataURL()`	Base64 字符串	高（+33%）	小图、调试
`toBlob()`	二进制 Blob	低	大图、生产环境

try {
    canvas.toBlob(...);
} catch (e) {
    if (e.name === 'SecurityError') {
        alert('检测到跨域图片，请确保服务器启用了 CORS 头');
    }
}

async function captureAndDownload(element, filename = 'capture.png') {
    const rect = element.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const canvas = document.createElement('canvas');
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    const ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
    const svg = `
        <svg xmlns="http://www.w3.org/2000/svg">
            <foreignObject>
                <body>
                    ${getFullStyles()}
                    ${element.outerHTML}
                </body>
            </foreignObject>
        </svg>`;
    const blob = new Blob([svg], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const img = new Image();
    img.crossOrigin = 'anonymous';
    return new Promise((resolve, reject) => {
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            URL.revokeObjectURL(url);
            canvas.toBlob((blob) => {
                const fileUrl = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = fileUrl;
                a.download = filename;
                const event = new MouseEvent('click', { bubbles: true, cancelable: true });
                a.dispatchEvent(event);
                setTimeout(() => {
                    URL.revokeObjectURL(fileUrl);
                }, 1000);
                resolve(blob);
            }, 'image/png', 0.95);
        };
        img.onerror = () => reject(new Error('SVG 加载失败'));
        img.src = url;
    });
}

graph TD
A[获取 DOM 元素] --> B[计算几何尺寸]
B --> C[创建离屏 Canvas]
C --> D[构建 SVG+foreignObject]
D --> E[加载 SVG 为 Image]
E --> F[绘制到 Canvas]
F --> G[Canvas 转 Blob]
G --> H[创建 a 标签+download 属性]
H --> I[模拟点击触发下载]

场景	应用方式	优化建议
报表快照导出	截取 ECharts/DOM 表格	叠加水印层 Canvas
错误日志上报	捕获当前 UI 状态	与 console 日志打包上传
表单填写确认	生成填写结果预览图	使用 print media 样式隔离
移动端分享	生成可分享图片	限制最大宽度防内存溢出
打印预览增强	替代浏览器打印样式问题	插入分页符区域标记

if (typeof SVGForeignObjectElement === 'undefined') {
    loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js')
        .then(() => html2canvas(element).then(canvas => downloadCanvas(canvas)));
}

用原生 JavaScript 和 Canvas 实现网页截图：从底层原理到下载

Canvas：画布的事先准备

离屏 Canvas：把重活丢给后台线程

更多推荐文章

相关免费在线工具

精准捕获：不只看得到的位置

长页面拼接：像胶卷一样一格格拍

SVG + foreignObject：把 HTML'骗'进 Canvas

导出与下载：让用户带走图像

一个无依赖的完整截图函数

业务场景与建议

结语

更多推荐文章

相关免费在线工具