# NeosJS ScreenShot

JS截屏插件

## 安装

```bash
# npm
npm install @neosjs/screen-shot
# yarn
yarn add @neosjs/screen-shot
# pnpm
pnpm add @neosjs/screen-shot
```

## 使用

```ts
import ScreenShot from '@neosjs/screen-shot'
import '@neosjs/screen-shot/dist/index.css'
let screenShoter = null
const screen = () => {
  screenShoter = new ScreenShot({
    cutDotColor: '#1da750',
    cutDotSize: 6,
    cutDotRound: true,
    toolPosition: 'right',
    confirmBtnText: '完成',
    showToolIcon: [
      'save'
    ],
    onComplete: ({ base64 }: any) => {
      console.log(base64)
    },
    onSave: (code: number, msg: string) => {
      console.log(code, msg)
    },
    onLoaded: res => {
      console.log(res, '截图组件加载完毕')
    },
    onClose: () => {
      console.log('关闭截图')
    }
  })
}

// 确认截图
const complete = () => {
  screenShoter && screenShoter.complete()
}

// 销毁
const destroy = () => {
  screenShoter && screenShoter.destroy()
}

```

## 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--- | :--- | :---: | :---: | :---: |
| enableWebRtc | 是否启用WebRtc | boolean | - | false |
| webrtcWindowMode | 是否启用窗口截图模式，默认为当前标签页截图 | Boolean | - | false |
| level | 截图容器层级 | number | - | 99999 |
| canvasWidth | 画布宽度(必须与高度一起设置，单独设置无效。) | number | - | - |
| canvasHeight | 画布高度(必须与宽度一起设置，单独设置无效。) | number | - | - |
| dpr | 画布像素比 | number | - | window.devicePixelRatio |
| lockScroll | 是否锁定滚动条 | boolean | - | true |
| position | 截图框位置 | object | { top: 0, left: 0 } | - |
| clickCutFullScreen | 点击截图框是否全屏 | boolean | - | false |
| screenShotDom | 需要进行截图的容器 | HTMLElement、HTMLDivElement、HTMLCanvasElement | - | - |
| maskColor | 遮罩颜色 | string | - | rgba(0, 0, 0, 0.5) |
| saveImgTitle | 保存图片时的文件名 | string | - | new Date().getTime() |
| cutDotColor | 截图点颜色 | string | - | #6cb6ff |
| cutDotSize | 截图点大小 | number | -|  6 |
| cutDotRound | 截图点是否圆角 | boolean | - | false |
| showScreenData | 是否显示截图数据 | boolean | - | false |
| toolPosition | 工具栏位置 | string | left、right、center | right |
| confirmBtnText | 确认按钮文案 | string | - | - |
| showToolIcon | 显示的工具栏图标 | string[] | 'square', 'round', 'brush', 'mosaicPen', 'text', 'undo', 'confirm', 'right-top', 'separateLine', 'save' |  ['close','confirm'] |
| imgSrc | 截图图片地址 | string | - | - |
| loadCrossImg | 是否加载跨域图片 | boolean | - | false |
| cropBoxInfo | 截图框信息 | object | { width: 200, height: 200, x: 0, y: 0 } | - |
| onComplete | 截图完成回调 | (res: { base64: string }) => void | - | - |
| onSave | 保存回调 | (code: number, msg: string) => void | - | - |
| onLoaded | 加载完成回调 | (res: any) => void | - | - |
| onClose | 关闭回调 | () => void | - | - |
| rightClickEvent | 右键事件 |{ state: boolean; handler?: () => void | - | - |
> 如果未配置 `onComplete` 回调，点击确认截图返回的 `base64` 数据将存储在 `seeionStorage` 中，key 为 `screenShotImg`。可通过 `sessionStorage.getItem('screenShotImg')` 获取。

## 方法

| 方法 | 说明 |
| :--- | :--- |
| complete | 确认截图 |
| destroy | 销毁截图组件 |

## 快捷键

| 快捷键 | 说明 |
| :--- | :--- |
| Ctrl/Command + z | 按下这两个组合键时，等同于点了截图工具栏的撤销图标。 |
| Esc | 按下键盘上的esc键时，等同于点了工具栏的关闭图标。 |
| Enter | 按下键盘上的Enter键时，等同于点了工具栏的确认图标。 |

## 工具栏图标定制
> 通过配置 `showToolIcon` 可以定制工具栏图标，可选值如下：

| 名称 | 说明 |
| :--- | :--- |
| square | 方形截图 |
| round | 圆形截图 |
| brush | 画笔 |
| mosaicPen | 马赛克笔 |
| text | 文字 |
| undo | 撤销 |
| confirm | 确认 |
| right-top | 右上角 |
| separateLine | 分割线 |
| save | 保存 |
| close | 关闭 |