将 div 内容保存为图片

约 691 字大约 2 分钟

2026-05-06

将网页中某个特定 div 的内容保存为图片，是前端常见的需求（如生成海报、截图分享等）。目前最主流且稳妥的方案是借助第三方库将 DOM 渲染到 Canvas，再导出为图片。下面是一些实现方案。

html2canvas

html2canvas 简单易用，支持大部分样式，能够满足大多数保存为图片的需求。

依赖引入：

npm install html2canvas

或通过 CDN 引入：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

基础用法：

将指定 div 渲染到 Canvas，通过 a 标签的 download 属性触发图片下载：

import html2canvas from 'html2canvas';

async function downloadDivAsImage(divElement, fileName = 'download.png') {
  try {
    const canvas = await html2canvas(divElement, {
      // 可选配置
      scale: 2,                 // 提高清晰度，默认1
      backgroundColor: null,
      useCORS: true,            // 允许加载跨域图片
      allowTaint: false,        // 不允许画布被污染
      logging: false,
    });

    // 将 canvas 转为 Blob 并下载
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }, 'image/png');
  } catch (error) {
    console.error('生成图片失败:', error);
  }
}

示例：

html2canvas示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html2canvas 下载图片</title>

    <!-- 1. 引入 html2canvas -->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <style>

        /* 需要保存为图片的卡片 */
        #capture {
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 32px 28px;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.08);
            text-align: center;
            margin-bottom: 28px;
        }
        #capture h2 {
            margin: 0 0 10px;
            font-size: 1.6rem;
            color: #1e293b;
        }
        #capture p {
            color: #475569;
            font-size: 0.95rem;
            margin: 0 0 16px;
        }
        #capture .tag {
            display: inline-block;
            background: #eef2ff;
            color: #4f46e5;
            font-weight: 600;
            padding: 6px 18px;
            border-radius: 30px;
            font-size: 0.85rem;
            letter-spacing: 0.3px;
        }
        #capture .footer-text {
            margin-top: 16px;
            font-size: 0.75rem;
            color: #94a3b8;
        }

        /* 下载按钮 */
        .btn-download {
            background: #4f46e5;
            color: white;
            border: none;
            padding: 13px 32px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 6px 18px rgba(79,70,229,0.3);
            letter-spacing: 0.3px;
        }
        .btn-download:hover {
            background: #4338ca;
            transform: translateY(-1px);
            box-shadow: 0 8px 24px rgba(79,70,229,0.4);
        }
        .btn-download:active {
            transform: scale(0.96);
        }
    </style>
</head>
<body>
    <div id="capture">
        <h2>分享卡片</h2>
        <p>这是一段简短的描述文字，展示卡片保存为图片的效果。</p>
        <span class="tag">html2canvas</span>
    </div>

    <!-- 下载按钮 -->
    <button class="btn-download" onclick="downloadImage()">
        保存为图片
    </button>

    <script>
        async function downloadImage() {
            const element = document.getElementById('capture');
            const btn = document.querySelector('.btn-download');
            
            // 按钮置灰，防止重复点击
            btn.disabled = true;
            btn.textContent = '保存中...';

            try {
                // 2. 将元素渲染到 Canvas
                const canvas = await html2canvas(element, {
                    scale:2,                    // 2倍清晰度
                    backgroundColor:null,
                    useCORS: true,              // 如需加载外部图片保留
                    allowTaint: false,
                    logging: false
                });

                // 3. Canvas → Blob → 触发下载
                canvas.toBlob((blob) => {
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = `卡片_${Date.now()}.png`;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url);   // 释放内存
                }, 'image/png');

            } catch (error) {
                console.error('生成失败:', error);
                alert('图片生成失败，请检查控制台');
            } finally {
                // 恢复按钮
                btn.disabled = false;
                btn.textContent = '保存为图片';
            }
        }
    </script>

</body>
</html>