React Screenshot Capture

一个功能强大的 React 截图组件，提供类似微信截图的交互体验。支持全屏截图、区域选择、裁剪等功能。

🚀 特性

• 📸 全屏截图 - 支持捕获整个页面或指定元素
• ✂️ 区域裁剪 - 拖拽选择截图区域，类似微信截图体验
• 🎨 高度可定制 - 支持自定义样式、配置选项
• 📱 响应式设计 - 适配移动端和桌面端
• 🔧 TypeScript - 完整的类型定义支持
• 🪝 React Hooks - 提供便捷的 Hook API
• 📋 剪贴板支持 - 一键复制截图到剪贴板
• 💾 下载功能 - 支持下载截图文件

📦 安装

npm install react-screenshot-capture
# 或
yarn add react-screenshot-capture
# 或
pnpm add react-screenshot-capture

🎯 快速开始

基础用法

import React from "react";
import { ScreenshotCapture } from "react-screenshot-capture";

function App() {
  const handleCapture = (dataUrl: string, cropArea?: CropArea) => {
    console.log("截图完成:", dataUrl);
    // 处理截图数据
  };

  return (
    <ScreenshotCapture onCapture={handleCapture} enableCrop={true}>
      <button>📸 开始截图</button>
    </ScreenshotCapture>
  );
}

使用 Hook

import React from "react";
import { useScreenshot, downloadScreenshot } from "react-screenshot-capture";

function MyComponent() {
  const { capture, isCapturing, error } = useScreenshot();

  const handleClick = async () => {
    try {
      const dataUrl = await capture();
      downloadScreenshot(dataUrl, "my-screenshot");
    } catch (err) {
      console.error("截图失败:", err);
    }
  };

  return (
    <button onClick={handleClick} disabled={isCapturing}>
      {isCapturing ? "截图中..." : "快速截图"}
    </button>
  );
}

📖 API 文档

ScreenshotCapture Props

| 属性 | 类型 | 默认值 | 描述 | | ------------ | ------------------------------------------------ | ------- | ---------------- | | children | React.ReactNode | - | 触发截图的子元素 | | onCapture | (dataUrl: string, cropArea?: CropArea) => void | - | 截图完成回调 | | onCancel | () => void | - | 截图取消回调 | | enableCrop | boolean | true | 是否启用裁剪功能 | | options | ScreenshotOptions | {} | 截图配置选项 | | className | string | '' | 自定义 CSS 类名 | | disabled | boolean | false | 是否禁用组件 |

ScreenshotOptions

| 属性 | 类型 | 默认值 | 描述 | | ----------------- | --------------------------- | ----------- | ---------------- | | quality | number | 0.8 | 图片质量 (0-1) | | format | 'png' \| 'jpeg' \| 'webp' | 'png' | 输出格式 | | backgroundColor | string | '#ffffff' | 背景颜色 | | allowTaint | boolean | false | 是否允许跨域图片 | | useCORS | boolean | true | 是否使用 CORS |

useScreenshot Hook

const {
  capture, // 执行截图的函数
  crop, // 裁剪图片的函数
  isCapturing, // 是否正在截图
  error, // 错误信息
  reset, // 重置状态
} = useScreenshot();

工具函数

// 捕获截图
captureScreenshot(element?: HTMLElement, options?: ScreenshotOptions): Promise<string>

// 裁剪图片
cropScreenshot(dataUrl: string, cropArea: CropArea): Promise<string>

// 下载截图
downloadScreenshot(dataUrl: string, filename?: string): void

// 复制到剪贴板
copyToClipboard(dataUrl: string): Promise<void>

🎨 自定义样式

组件提供了丰富的 CSS 类名供自定义样式：

/* 覆盖层样式 */
.screenshot-overlay {
  /* 自定义蒙层样式 */
}

/* 选择区域样式 */
.selection-area {
  /* 自定义选择框样式 */
}

/* 工具栏样式 */
.screenshot-toolbar {
  /* 自定义工具栏样式 */
}

/* 按钮样式 */
.screenshot-btn {
  /* 自定义按钮样式 */
}

🔧 高级用法

指定元素截图

import { useScreenshot } from "react-screenshot-capture";

function ElementScreenshot() {
  const { capture } = useScreenshot();
  const elementRef = useRef<HTMLDivElement>(null);

  const handleCapture = async () => {
    if (elementRef.current) {
      const dataUrl = await capture(elementRef.current);
      // 处理截图
    }
  };

  return (
    <div>
      <div ref={elementRef}>{/* 要截图的内容 */}</div>
      <button onClick={handleCapture}>截图此元素</button>
    </div>
  );
}

自定义截图质量

<ScreenshotCapture
  options={{
    quality: 1.0, // 最高质量
    format: "png", // PNG格式
    backgroundColor: "#f0f0f0",
  }}
  onCapture={handleCapture}
>
  <button>高质量截图</button>
</ScreenshotCapture>

🌍 浏览器兼容性

• Chrome 63+
• Firefox 53+
• Safari 13.1+
• Edge 79+

📝 开发计划

• [ ] 添加更多截图格式支持
• [ ] 支持批量截图
• [ ] 添加截图编辑功能（标注、文字等）
• [ ] 支持截图历史记录
• [ ] 优化移动端体验

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

本项目基于以下优秀的开源库：

• html2canvas - HTML 转 Canvas
• React - UI 框架