• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js-screen-shot: Web 端自定义截屏插件 (原生 JS 版)

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

js-screen-shot

开源软件地址:

https://gitee.com/likai119/js-screen-shot

开源软件介绍:

js-web-screen-shot · npm yarn github

web端自定义截屏插件(原生JS版),运行视频:实现web端自定义截屏功能 ,效果图如下:截屏效果图

写在前面

关于此插件的更多介绍以及实现原理请移步:

插件安装

yarn add js-web-screen-shot# ornpm 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类型。
  • triggerCallback 截图响应回调函数,值为Function类型,使用html2canvas截屏时,页面图片过多时响应会较慢,该函数为响应完成后触发的事件。回调函数返回一个对象,类型为: {code: number,msg: string},code为0时代表截图加载完成。
  • cancelCallback 取消分享回到函数,值为Function类型,使用webrtc模式截屏时,用户点了取消或者浏览器不支持时所触发的事件。回调函数返回一个对象,类型为:{code: number,msg: string},code为-1时代表用户未授权或者浏览器不支持webrtc。
  • level 截图容器层级,值为number类型。
  • canvasWidth 画布宽度,值为number类型。
  • canvasHeight 画布高度,值为number类型。
  • position 截图容器位置,值为{left?: number, top?: number}类型
  • clickCutFullScreen 单击截全屏启用状态,值为boolean类型, 默认为false
  • hiddenToolIco 需要隐藏的截图工具栏图标,值为{ save?: boolean; undo?: boolean; confirm?: boolean }类型,默认为{}。传你需要隐藏的图标名称,将值设为true即可。

上述类型中的?:为ts中的可选类型,意思为:这个key是可选的,如果需要就传,不需要就不传。

API文档

插件暴露了一些内部变量出来,便于调用者根据自己的需求进行修改。

getCanvasController

该函数用于获取截图容器的DOM,返回值为HTMLCanvasElement类型。

示例代码:

import ScreenShort from "js-web-screen-shot";const screenShotHandler = new ScreenShort();const canvasDom = screenShotHandler.getCanvasController();

注意:如果截图容器尚未加载完毕,获取到的内容可能为null。

工具栏图标定制

如果你需要修改截图工具栏的图标,可以通过覆盖元素css类名的方式实现,插件内所有图标的css类名如下所示

注意:下述所有列举的图标还包含点击后的图标样式,它的写法为.xxx-active {},例如:.square-active {}

square 矩形绘制图标

  .square {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }        &:active {      background-image: url("你的图标路径") !important;    } }

round 圆型绘制图标

  .round {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

right-top 箭头绘制图标

  .right-top {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

brush 画笔工具

  .brush {    background-image: url("你的图标路径") !important;    &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }    // 画笔尺寸选择  // 分为3种尺寸:small、medium、big  // 此处只列举small尺寸的写法,其它两种只需要替换brush-xxx即可  .brush-small {        background-image: url("你的图标路径") !important;    &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

mosaicPen 马赛克工具

  .mosaicPen {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

text 文本工具

  .text {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

save 保存

  .save {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }    &:active {      background-image: url("你的图标路径") !important;    }  }

close 关闭

  .close {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }  }

undo 撤销

  .undo {        background-image: url("你的图标路径") !important;      &:hover{      background-image: url("你的图标路径") !important;    }  }  // 禁用状态图标  .undo-disabled {        background-image: url("你的图标路径") !important;  }

confirm 确认

  .confirm {    background-image: url("你的图标路径") !important;        &:hover {      background-image: url("你的图标路径") !important;    }  }

写在最后

至此,插件的所有使用方法就介绍完了,该插件的Vue3版本,请移步:vue-web-screen-shot


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap