读取指定 DOM 元素的 CSS 样式和内容，然后通过 Canvas 逐像素地将其“绘制”出来，最后将 Canvas 的内容转换成一张图片（如 PNG 或 JPEG）供用户下载。

用js截取网页生成图并下载到本地
（图片来源网络，侵删）

下面我将为你提供一个完整、详细的教程，从安装到使用,并包含一些常见问题的解决方案。

第一步：准备工作（引入 html2canvas）

你可以通过两种方式在项目中引入 html2canvas：

使用 NPM（推荐用于现代前端项目，如 Vue, React, Angular）

如果你使用的是 Vite, Webpack, Create React App 等构建工具，可以通过 NPM 安装。

  1. 安装库

    用js截取网页生成图并下载到本地
    （图片来源网络，侵删）
    npm install html2canvas
# 或者
yarn add html2canvas

  2. 在你的 JavaScript/TypeScript 文件中引入

    import html2canvas from 'html2canvas';

使用 CDN（适合简单的 HTML 页面）

如果你的项目是一个静态 HTML 文件，可以直接在 <head> 或 <body> 中通过 <script> 标签引入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

第二步：编写核心代码

下面是一个完整的、可以直接运行的 HTML 示例,展示了如何截取整个页面或指定区域。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网页截图示例</title>
    <style>
        /* 为了演示，给 body 添加一些样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        /* 这是我们要截图的区域 */
        #capture-area {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            max-width: 800px;
            margin: 20px auto;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
        /* 控制按钮的样式 */
        .controls {
            text-align: center;
            margin-bottom: 20px;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        /* 为了演示滚动条，我们创建一个很长的内容区域 */
        .long-content {
            height: 2000px;
            background: linear-gradient(to bottom, #ffcccc, #ccffcc);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button id="capture-full-page">截取整个页面</button>
        <button id="capture-specific-area">截取指定区域</button>
    </div>
    <!-- 这是我们要截图的区域 -->
    <div id="capture-area">
        <h1>你好，这是一个截图示例！</h1>
        <p>点击上方的按钮，可以尝试截取整个页面或截取这个白色的卡片区域。</p>
        <p>html2canvas 会尽力渲染出和你在浏览器中看到的一样的效果。</p>
    </div>
    <div class="long-content">
        <p>向下滚动...</p>
    </div>
    <!-- 引入 html2canvas 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        // 获取按钮元素
        const captureFullPageBtn = document.getElementById('capture-full-page');
        const captureSpecificAreaBtn = document.getElementById('capture-specific-area');
        // 截取整个页面的函数
        captureFullPageBtn.addEventListener('click', () => {
            // html2canvas 的第一个参数是要截图的 DOM 元素
            // 截取整个页面，我们通常传入 document.body
            html2canvas(document.body).then(canvas => {
                // 将 canvas 转换为图片数据 URL
                const image = canvas.toDataURL('image/png');
                // 创建一个临时的 <a> 标签用于下载
                const link = document.createElement('a');
                link.download = 'full-page-screenshot.png'; // 设置下载的文件名
                link.href = image;
                link.click(); // 触发点击下载
            }).catch(err => {
                console.error('截图失败:', err);
                alert('截图失败，请检查控制台获取错误信息。');
            });
        });
        // 截取指定区域的函数
        captureSpecificAreaBtn.addEventListener('click', () => {
            // 获取我们想要截图的特定元素
            const elementToCapture = document.getElementById('capture-area');
            html2canvas(elementToCapture).then(canvas => {
                const image = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = 'specific-area-screenshot.png';
                link.href = image;
                link.click();
            }).catch(err => {
                console.error('截图失败:', err);
                alert('截图失败，请检查控制台获取错误信息。');
            });
        });
    </script>
</body>
</html>

第三步：核心代码解析

  1. html2canvas(element, options)

    用js截取网页生成图并下载到本地
    （图片来源网络，侵删）
    • element: 必需参数，一个 DOM 元素或选择器字符串（如 '#my-div'），html2canvas 将会截取这个元素及其所有子元素。
    • options: 可选参数，一个配置对象,用于控制截图的行为和质量。

  2. .then(canvas => { ... })

    • html2canvas 是一个异步函数，它返回一个 Promise，当截图成功完成后，Promise 会解析（resolve），并返回一个 <canvas> 元素对象。

  3. canvas.toDataURL('image/png')

    • 这是 Canvas API 的一个方法，它将画布上的图像内容转换为一个 Base64 编码的 Data URL，这个字符串可以直接用作 <img> 标签的 src 属性，或者作为下载链接的 href。
    • 你也可以指定 'image/jpeg' 格式，并调整质量：canvas.toDataURL('image/jpeg', 0.8)。

  4. 创建下载链接

    • 我们动态创建一个 <a>
    • link.download = '...'; 设置用户点击链接后,浏览器提示下载的文件名。
    • link.href = '...'; 设置链接地址为刚才生成的 Data URL。
    • link.click(); 用 JavaScript 模拟点击这个链接,从而触发文件下载。

第四步：常用配置选项（options 对象）

html2canvas 非常灵活，你可以通过 options 对象来优化截图效果。

const options = {
    // 截图的宽度和高度，如果未指定，则使用元素的原始尺寸。
    width: elementToCapture.offsetWidth,
    height: elementToCapture.offsetHeight,
    // 截图的缩放比例，数值越大，图片越清晰，文件也越大。
    // 默认是 1，对于高分辨率屏幕（Retina），可以设置为 2 或更高。
    scale: 2, 
    // 是否启用跨域支持，如果截图内容包含来自其他域名的图片（img），
    // 并且这些图片没有设置 CORS 头，你需要设置这个为 true。
    // 服务器端的图片也必须允许跨域。
    useCORS: true, 
    // 允许加载外部图片，默认为 false。
    allowTaint: true, 
    // 背景色，默认是 transparent（透明）。
    // 如果你的元素背景是透明的，但又想设置一个纯色背景，可以在这里指定。
    backgroundColor: '#ffffff',
    // 是否捕获滚动条，默认是 false。
    scrollX: 0,
    scrollY: 0,
};
html2canvas(elementToCapture, options).then(canvas => {
    // ... 处理 canvas
});

第五步：常见问题与解决方案

问题：截图不完整，或者截出来是空白

  • 原因：最常见的原因是异步加载，如果你的页面内容是通过 AJAX 或 Fetch 动态加载的，html2canvas 可能在内容还没完全加载完成时就执行了。

  • 解决方案：确保在调用 html2canvas 之前，所有需要渲染的内容都已经加载完毕，可以使用 window.onload 或在 AJAX 请求的 success 回调中执行截图逻辑。

    // 错误示例
fetch('/api/data').then(response => response.json());
html2canvas(...); // 可能在数据还没回来时就执行了
// 正确示例
fetch('/api/data').then(response => response.json()).then(data => {
    // 更新页面内容...
    document.getElementById('my-content').innerHTML = data.html;
    // 确保浏览器已经渲染了新内容，可以使用 setTimeout 给一点时间
    setTimeout(() => {
        html2canvas(document.getElementById('my-content')).then(...);
    }, 100);
});

问题：截图中的图片显示为空白或带叉的图标

  • 原因：跨域资源共享策略限制，当 html2canvas 尝试绘制一个来自不同域名的 <img> 元素时，如果该图片的服务器没有设置 Access-Control-Allow-Origin 头，浏览器会阻止其读取像素数据,导致截图失败。
  • 解决方案：
    1. 服务器端配置：最佳方案是让图片的源服务器配置 CORS 头,允许你的域名访问。
    2. useCORS 选项：在 options 中设置 useCORS: true。
    3. 代理图片：如果你的图片资源不受控，可以先将图片下载到你自己的服务器上，再让 html2canvas 截取你服务器上的图片。

问题：截图模糊，不清晰

  • 原因：scale 参数默认为 1，在高分辨率屏幕（Retina 显示屏）上，1 个 CSS 像素可能对应多个物理像素,导致截图看起来模糊。

  • 解决方案：在 options 中设置 scale 为 2 或更高。

    const options = {
    scale: 2 // 或 window.devicePixelRatio
};

问题：截图的样式和浏览器中看到的不一样

  • 原因：html2canvas 依赖于浏览器的渲染引擎，但它并不是 100% 完美复现，一些非常新的 CSS 特性、复杂的 box-shadow、filter 效果或 SVG 的某些特性可能无法被准确捕获。
  • 解决方案：
    • 检查 html2canvas 的版本和文档，确认它是否支持你使用的 CSS 特性。
    • 尝试简化元素的样式,移除可能导致问题的复杂效果。
    • 在 GitHub 上搜索 html2canvas 的 issues,看看是否有人遇到过和你类似的问题。

希望这份详细的指南能帮助你成功实现网页截图和下载功能！