0.0.4 • Published 5 years ago
react-screenshot-editor v0.0.4
react-screenshot-editor
介绍
使用html2canvas对浏览器窗口可视范围进行截图，并使用线性或马赛克两种画笔进行编辑。
Demo
使用
import Editor from 'react-screenshot-editor';
<Editor
type="line"
width= {600}
height={450}
editorDidMount={this.handleEditorDidMount}
/>API
| 名称 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| className | string | '' | 类名 |
| options | object | { useCORS: true,scale: 1} | html2canvas的配置信息，参考 |
| type | line or mosaic | line | 画笔类型：线或马赛克 |
| lineWidth | number | 2 | 线性画笔宽度 |
| strokeStyle | string | red | 线性画笔颜色 |
| width | number | 600 | 画布宽度 |
| height | number | 450 | 画布高度 |
| ratio | number | 0.9 | 导出图片的质量，取值：0~1 |
| editorDidMount | (editor)=>void | - | 编辑器挂载后的回调 |
editorDidMount 中的 editor
包含以下属性或方法：
- 属性
context:目标canvas的context（不建议直接操作） - 方法
autoScreenShot: 重新执行截图 方法
getImageURL: 导出图片Base64数据