代码拉取完成,页面将自动刷新
同步操作将从 MagicalProgrammer/js-screen-shot 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
web端自定义截屏插件(原生JS版),运行视频:实现web端自定义截屏功能 ,效果图如下:
关于此插件的更多介绍以及实现原理请移步:
yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save
由于插件采用原生js编写且不依赖任何第三方库,因此它可以在任意一台支持js的设备上运行。
import ScreenShort from "js-web-screen-shot";
new ScreenShort();
⚠️注意:实例化插件时一定要等dom加载完成,否则插件无法正常工作。
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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。