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