ff-js-web-screen-shot
v1.2.2
Published
web端自定义截屏插件(原生JS版)
Downloads
2
Maintainers
Readme
js-web-screen-shot ·
web端自定义截屏插件(原生JS版),运行视频:实现web端自定义截屏功能 ,效果图如下:
插件安装
yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save
插件使用
由于插件采用原生js编写且不依赖任何第三方库,因此它可以在任意一台支持js的设备上运行。
import形式使用插件
- 在需要使用截屏插件的业务代码中导入插件
import ScreenShort from "js-web-screen-shot";
- 在业务代码中使用时实例化插件即可
new ScreenShort();
⚠️注意:实例化插件时一定要等dom加载完成,否则插件无法正常工作。
cdn形式使用插件
- 将插件的
dist
文件夹复制到你的项目中 - 使用
script
标签引入dist目录下的screenShotPlugin.umd.js
文件
<script src="./screenShotPlugin.umd.js"></script>
- 在业务代码中使用时实例化插件即可
// 截图确认按钮回调函数
const callback = (base64) =>{
console.log(base64);
}
// 截图取消时的回调函数
const closeFn = ()=>{
console.log("截图窗口关闭");
}
new screenShotPlugin({enableWebRtc: true, completeCallback: callback,closeCallback: closeFn});
⚠️注意:实例化插件时一定要等dom加载完成,否则插件无法正常工作。
参数说明
截图插件有一个可选参数,它接受一个对象,对象每个key的作用如下:
enableWebRtc
是否启用webrtc,值为boolean
类型,值为false
则使用html2canvas
来截图completeCallback
截图完成回调函数,值为Function
类型,最右侧的对号图标点击后会将图片的base64地址回传给你定义的函数,如果不传的话则会将图片的base64地址放到sessionStorage
中,你可以通过下述方式拿到他:
sessionStorage.getItem("screenShotImg");
closeCallback
截图关闭回调函数,值为Function
类型。level
截图容器层级,值为number类型。canvasWidth
画布宽度,值为number类型。canvasHeight
画布高度,值为number类型。position
截图容器位置,值为{left?: number, top?: number}
类型
写在最后
至此,插件的所有使用方法就介绍完了,该插件的Vue3版本,请移步:vue-web-screen-shot