NeosJS ScreenShot

JS截屏插件

安装

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

使用

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 | 关闭 |