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