资讯专栏INFORMATION COLUMN

一款实用的前端截图工具

VishKozus / 844人阅读

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

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 码云

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

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

相关文章

  • chrome 扩展精选推荐

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

    X_AirDu 评论0 收藏0
  • 前端工具【3】—— 图片处理

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

    MobService 评论0 收藏0
  • 前端工具【3】—— 图片处理

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

    Rango 评论0 收藏0
  • 分享一些实用软件工具

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

    arashicage 评论0 收藏0
  • 推介几款 windows 下非常好用工具

    摘要:也是可以在里面下载的一款高质量壁纸库,所有壁纸来源网站,均无版权可以免费使用,再加上简洁美观的设计,让你体验一见钟情的感觉。 在下工具控一枚,平时会留意收集各种各样给我们生活生产带来便捷的工具,毕竟人生苦短;下面介绍一些 Windows 系统上发现的一些好用的工具,并且将一笔带过主要特点,详细用法可以搜一下,相关帖子挺多的,每个都展开介绍的话那就太长啦~ Listary 啥都憋说了,L...

    Jason 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<