WebScreenshot

English | 中文

基于 html2canvas 的轻量级前端手动截屏插件。支持手动框选区域、截图预览、多语言等功能。

✨ 特性

• 🟦 TypeScript 支持：提供完整的类型定义。
• 🖐 手动框选：支持拖拽框选截图区域。
• 🔄 操作便捷：支持重置选区、取消截图。
• 🔒 滚动锁定：截图过程中自动锁定页面滚动。
• 📍 智能定位：操作按钮组根据视口空间自动调整位置。
• 🌐 国际化：支持中文和英文（默认为中文）。

📦 安装

npm install bunnn-web-screenshot

🚀 使用方法

1. 引入插件和样式

import { WebScreenshot } from 'bunnn-web-screenshot';
// 如果你的构建工具没有自动处理样式，可能需要手动引入 CSS
import 'bunnn-web-screenshot/dist/style.css';

2. 基本用法

const screenshot = new WebScreenshot();

// 开始截图
screenshot.start((blob) => {
  if (!blob) return;
  // 截图成功后的回调，返回一个 Blob 对象
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});

3. 国际化配置

默认使用中文界面。如果需要英文界面，可以在初始化时配置：

const screenshot = new WebScreenshot({
  lang: 'en' // 'zh' | 'en'
});

📚 API 文档

new WebScreenshot(options?)

创建一个截图实例。

| 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | options | WebScreenshotOptions | {} | 配置选项 | | options.lang | 'zh' \| 'en' | 'zh' | 界面语言 |

instance.start(callback)

开始截图流程。

| 参数 | 类型 | 描述 | | --- | --- | --- | | callback | (blob: Blob \| null) => void | 截图完成后的回调函数，接收生成的 Blob 对象 |

📄 License

ISC