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数据