一款实用的web截图工具（一）

码云地址：码云

github地址： github

kscreenshot

介绍
web截图工具的功能实现基于Canvas技术。其功能主要包括截图，下载，复制以及在截图过程中通过工具栏对截图进行绘制。

使用
具体使用方法请戳码云 GitHub

实现方式
本文将会根据代码中的src文件夹里面的每个文件逐一介绍。

首先先看入口文件kss.js。

let kss = (function () {let instancelet kss = function (key, getAbsolutePath) {if (instance) {return instance}this.kss = null...this.init(key)return instance = this}kss.prototype.init = function (key) {...}kss.prototype.start = function () {...}kss.prototype.end = function () {...}return kss
)()

上述代码通过立即执行函数生成一个构造函数，该函数有两个参数：key,getAbsolutePath；其中第一个参数key为键盘中的keyCode，用以开启截图模式。第二个参数为一个回调函数，主要是解决实现复制功能时，只能使用绝对路径的问题。构造函数中的if语句让该构造函数是一个单例模式，只允许生成同一个方法。this.kss = null及...是一些构造函数的属性和方法。this.init(key)用以初始化截图工具。在构造函数的下方，在其原型上定义了3个方法：init,start,end。

//init方法
kss.prototype.init = function (key) {const that = thisdocument.addEventListener('keydown', isRightKey.bind(null, key))function isRightKey (key, e) {if (e.keyCode === key && e.shiftKey && !that.isScreenshot) {that.isScreenshot = truethat.start()that.end()}}
}

这是初始化函数，它有一个key的参数，用以开启截图模式。函数中，在document上添加了一个键盘按下事件，通过isRightKey函数我们可以得出，当用户按下了设定的key值，shift键以及不在截图状态时，将执行start,end函数。

//start方法
kss.prototype.start = function () {const that = thishtml2canvas(document.body, {useCORS:true}).then((canvas) => {that.kss = canvascss(canvas, {position: 'fixed',top: 0,left: 0,'z-index': 10000})canvas.id = 'kss'document.body.appendChild(canvas)let style = document.createElement('style')style.type = 'text/css'style.innerHTML = `.kssBody{cursor: url("${cursorImg}"), auto; user-select: none}`that.style = styledocument.head.appendChild(style)addClass(document.body, 'kssBody')canvas.addEventListener('mousedown', that.startDrawDown)})
}

开始函数，使用了html2canvas插件，将生成一个基本还原内容的Canvas。将该canvas放入body当中，并给其添加一个鼠标按下事件。该事件将在下面介绍。

//end方法
kss.prototype.end = function () {const that = thisdocument.addEventListener('keydown', endScreenShot)function endScreenShot (e) {if (e.keyCode === 27) {endAndClear(that)document.removeEventListener('keydown', endScreenShot)}}
}

结束函数，在document上添加一个键盘事件，当键盘按下esc键（即keyCode为27）时，将结束截图状态。

剩余部分下篇继续

一款实用的web截图工具（二）

一款实用的web截图工具（一）相关推荐

一款实用的前端截图工具
一款实用的前端截图工具kscreenshot 安装: npm install kscreenshot --save 使用: import kscreenshot from 'kscreenshot'/ ...
两款实用的DDos攻击工具
两款实用的DDos攻击工具 2018-02-22Network • Security865 之前为了重现某个bug,需要对网络设备进行ddos攻击测试,同时也是对设备的网络攻击防护功能进行抗压测试.临 ...
轻量却超强——推荐几款好用的截图工具
轻量却超强--推荐几款好用的截图工具阅读导览(点击快速跳转): 1.FScapture 2.Snipaste 3.Picpick 相关文件下载及链接 1.FScapture(返回目录) FScapt ...
6款实用超火AI工具推荐，ChatGPT，Midjourney ，Notion AI ，Tome ，Descript ，Runway
ChatGPT等6款实用超火AI工具推荐 | 2023绝对称得上是脑洞大开的一年!人工智能的风口由OpenAI旗下的ChatGPT率先引爆.下面6个非常实用的AI工具强烈推荐给大家, [一] Chat ...
推荐7款实用强大的神器工具，建议你先收藏，总有一天你会用到！
分享7个非常强大的神器工具,每一款都是精品,喜欢的话记得点赞支持哦~ 1.后羿采集器后羿采集器是前谷歌技术团队倾力打造,基于人工智能技术,只需要输入网址就能自动识别采集内容.支持Win/Mac/Li ...
5款实用Python爬虫小工具推荐（云爬虫+采集器）
目前市面上我们常见的爬虫软件大致可以划分为两大类:云爬虫和采集器(特别说明:自己开发的爬虫工具和爬虫框架除外) 云爬虫就是无需下载安装软件,直接在网页上创建爬虫并在网站服务器运行,享用网站提供的带宽和 ...
PHP开发必备电脑,10款实用的PHP开源工具
在开发工作中,使用合适的工具可以最大化地提高效率.此外,大量的开源项目也节省了开发者重复"造轮"的时间,使得开发者可以专注于业务的实现. 本文介绍10款非常实用且开源的PHP开发辅 ...
提高工作效率必备,5款实用的Windows系统工具推荐
每次分享实用的软件,都会给人一种踏实和喜悦的感觉,这也是我热衷于搜集和推荐高效工具软件的原因. 音量控制--EarTrumpet EarTrumpet是一款音量控制工具,可以让你更方便地调节Windo ...
软件：推荐七款实用的画流程图工具
目录 1.Lucidchart 2.Cacoo 3.Creately 4.Coggle 5.百度脑图 6.ProcessOn(可能是最好的在线作图工具) 7.Draw.io 大家在日常的办公当中经常涉 ...

一款实用的web截图工具（一）

一款实用的web截图工具（一）相关推荐

最新文章

热门文章