一款实用的前端截图工具

VishKozus 发布于2019-08-22 18:29 / 954人阅读

摘要：代码地址码云这是一款基本涵盖了截图所有功能的截图工具。图如上图所示，用户可对截图框进行拖拽，并且工具栏能随着截图框与可视区域的位置动态显示在可视区域范围内。工具栏功能从左到右依次为颜色，文字，椭圆，矩形，线条，箭头，后退，完成。

kscreenshot

代码地址：github 码云

这是一款基本涵盖了截图所有功能的截图工具。

npm: npm install kscreenshot --save

demo图1：

如上图所示，用户可对截图框进行拖拽，并且工具栏能随着截图框与可视区域的位置动态显示在可视区域范围内。

demo图2：

如上图所示，用户可拖动截图框四周的拖拽点以及拖拽线进行随意拖动。

demo图3：

如上图所示，用户可使用工具栏中的各个工具对截图进行绘制。工具栏功能从左到右依次为：颜色，文字，椭圆，矩形，线条，箭头，后退，完成。当用户在进行绘制后无法在对截图框进行拖拽工作，除非使用后退功能直到无绘制时才能继续拖拽。

使用

import kscreenshot from "kscreenshot"

//65指键盘中的A
new kscreenshot(
    {
        key: 65 
    }
)

当按下shift + A将会触发截图功能

结合electron、NW等前端桌面开发库可实现整个显示屏截图 demo

具体的参数配置可在github上查看。喜欢的话，麻烦大家start一下：github 码云

GPU云服务器云服务器实用工具 linux实用小工具 win10截图工具 linux 磁盘实用工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95923.html

chrome 扩展精选推荐

摘要：我本人对扩展比较挑，一般有同类型的扩展我会选择维护比较积极的，使用人数更多的。其实包括很多编辑器和都有类似的扩展用来纠正英文的拼写错误。一款可以分析网站用到的技术框架的扩展。可以显示网站的国旗和其它信息。虽然有点标题党的嫌疑，但是内容绝对是满满的的干货。很多扩展功能比较单一，直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制，我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平...

X_AirDu 2019-08-23 17:02 评论0 收藏0
前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

MobService 2019-08-02 16:05 评论0 收藏0
前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

Rango 2019-08-29 16:42 评论0 收藏0
分享一些实用的软件工具

摘要：分享一些实用的软件工具也可以分享自己常用的软件给大家，这里会同步更新必备放几个资源站点有能力建议购买正版不要看格式的，可以是。建议使用清除系统的间谍软件，用了之后夏一跳，赶紧卸载了迅雷极速版，只用精简版。分享一些实用的软件工具 PS：也可以分享自己常用的软件给大家，这里会同步更新 kindle(必备) 放几个azw3资源站点：有能力建议购买正版,不要看PDF格式的，可以是mobi。我...

arashicage 2019-08-16 11:03 评论0 收藏0