Screenshots 截图组件
Screenshots, 一个界面截图组件，支持 Web、Electron 端使用，操作模式参照企业微信截图，支持各类路径的拖拽和编辑，支持放大镜、取色器、马赛克、文字绘制编辑等小组件，且所有操作均可回退，保存后会返回 base64 图片数据。
基础用法
loading
功能特性
- 截图选择：鼠标拖拽选择截图区域
- 绘制工具：支持矩形、椭圆、箭头、画笔、马赛克、文字等绘制工具
- 编辑功能：支持对已绘制的图形进行编辑和调整
- 撤销操作：所有操作均可回退
- 放大镜：截图区域选择时显示放大镜辅助
- 取色器：实时显示鼠标位置的颜色信息
- 多种导出：支持导出为 base64 图片数据
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| image | 图片地址 | string | '' |
| width | 容器宽度 | number | string | 0 |
| height | 容器高度 | number | string | 0 |
| className | 容器类名 | string | '' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onOk | 确定截图时触发 | (data: { viewer: any; dataURL: string }) |
| onCancel | 取消截图时触发 | - |
onOk 回调参数
| 参数 | 说明 | 类型 |
|---|---|---|
| viewer | 截图区域信息 | object |
| dataURL | 截图 base64 数据 | string |
viewer 对象结构
| 参数 | 说明 | 类型 |
|---|---|---|
| x1 | 左上角 x | number |
| y1 | 左上角 y | number |
| x2 | 右下角 x | number |
| y2 | 右下角 y | number |
绘制工具
| 工具 | 图标 | 说明 |
|---|---|---|
| 矩形 | □ | 绘制矩形 |
| 椭圆 | ○ | 绘制椭圆 |
| 箭头 | → | 绘制箭头 |
| 画笔 | ✏️ | 自由绘制 |
| 马赛克 | ▧ | 马赛克效果 |
| 文字 | T | 添加文字标注 |
| 撤销 | ↩️ | 撤销上一步操作 |
| 取消 | ✕ | 取消截图 |
| 确定 | ✓ | 完成截图 |