前端实现一键截图从原理到避坑的完整实战指南

[目标 DOM 元素]
       ↓
[html2canvas 解析并绘制到 <canvas>]
       ↓
[Canvas 转为 Data URL 或 Blob]
       ↓
[触发下载 或 显示在页面]

npm install html2canvas

<!-- Vue3 + Composition API 示例 -->
<template>
  <div>
    <!-- 目标截图区域 -->
    <div ref="captureRef" class="capture-area">
      <h2>我的数据看板</h2>
      <p>销售额：¥123,456</p>
      <div class="chart">📊 柱状图占位</div>
    </div>

    <!-- 截图按钮 -->
    <button @click="handleCapture">生成截图</button>

    <!-- 显示截图结果 -->
    <div v-if="screenshot" class="result">
      <img :src="screenshot" alt="截图" />
      <a :href="screenshot" rel="external nofollow"  download="dashboard.png" class="download-btn">
        下载图片
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';

const captureRef = ref(null);
const screenshot = ref('');

const handleCapture = async () => {
  try {
    const element = captureRef.value;
    
    // 核心：使用 html2canvas 截图
    const canvas = await html2canvas(element, {
      backgroundColor: '#ffffff', // 背景色
      scale: 2,                   // 提高清晰度
      useCORS: true,              // 支持跨域图片
      logging: false,             // 关闭日志
    });

    // 转为 base64 图片
    const dataURL = canvas.toDataURL('image/png');
    screenshot.value = dataURL;

  } catch (err) {
    console.error('截图失败:', err);
    alert('截图失败，请重试');
  }
};
</script>

<style>
.capture-area {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
.chart {
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  margin: 10px 0;
}
.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>

// 修改配置，提升清晰度
const canvas = await html2canvas(element, {
  scale: 3, // 放大倍数，3倍适合高清屏
  width: element.offsetWidth,
  height: element.offsetHeight,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight,
  x: 0,
  y: 0,
  scrollX: 0,
  scrollY: 0,
  backgroundColor: '#ffffff',
  useCORS: true, // 重要：支持跨域图片
  allowTaint: false, // 不允许污染（更安全）
});

const handleCaptureBlob = async () => {
  const canvas = await html2canvas(element, { scale: 2 });

  // 推荐：使用 toBlob 避免 base64 冗余
  canvas.toBlob((blob) => {
    const url = URL.createObjectURL(blob);
    screenshot.value = url;

    // 可选：自动下载
    const a = document.createElement('a');
    a.href = url;
    a.download = 'capture.png';
    a.click();
    URL.revokeObjectURL(url); // 释放内存
  }, 'image/png');
};

// 1. 后端设置 CORS 头
// Access-Control-Allow-Origin: *

// 2. 图片标签添加 crossorigin
<img src="https://xxx.com/avatar.jpg" crossorigin="anonymous" />

// 3. html2canvas 配置
useCORS: true,
allowTaint: false, // 更安全

// 等待字体加载
await document.fonts.ready;

// 或延迟截图
setTimeout(() => html2canvas(...), 500);

// 手动设置 canvas 高度
const fullHeight = element.scrollHeight;
const canvas = await html2canvas(element, {
  width: element.offsetWidth,
  height: fullHeight,
  scrollY: -window.scrollY, // 调整偏移
});

// 提示用户长按保存
alert('长按图片保存到相册');
// 或使用第三方库（如 file-saver）