亲亲特价:怎么删除回收站图标

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

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

开源软件名称：

js-screen-shot

开源软件地址：

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

开源软件介绍：

js-web-screen-shot ·

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人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

duckphp: DuckPhp 是一个 PHP 框架。回归 PHPer 的简单化发布时间：2022-03-23

flowable-ui: 整合Flowable官方的Rest包(flowable-modeler,flowable-idm,flowable-tas ...发布时间：2022-03-23

剪的笔顺,诠释剪的笔画,认识剪的部首

六六分期app的软件客服如何联系？(六六分期

2023-10-27

florent37/ViewAnimator: A fluent Android

2022-08-15

florent37/Shrine-MaterialDesign2: implem

2022-08-17

CVE-2020-36276

2022-09-23

SimpleSoftwareIO/simple-sms: Send and re

2022-08-13

阅读排行榜

1 六六分期app的软件客服如何联系？(六六分期

六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期

阅读：18279|2023-10-27

2 可心卡盟:win10系统火狐flash插件崩溃怎么

今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知

阅读：9678|2022-11-06

3 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8179|2022-11-06

4 济南大学虚拟社区:鲁大师节能降温的具体办

今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要

阅读：8549|2022-11-06

5 xlueops.exe:无线网络安装向导

我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多

阅读：8458|2022-11-06

6 女斗合众国:win7系统cf与主机连接不稳定怎

今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不

阅读：9393|2022-11-06

7 0xc000022-[cf烟雾头]cf怎么调烟雾头

电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很

阅读：8431|2022-11-06

8 qizideyouhuo:应用程序无法正常启动0xc0000

我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法

阅读：7865|2022-11-06

9 ipz-185:win7系统vcf文件怎么打开

今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win

阅读：8416|2022-11-06

10 傻哥蹦迪:win10系统s4怎么打开usb调试

今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎

阅读：7394|2022-11-06

客服电话

电子邮件