博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一款实用的前端截图工具
阅读量:6674 次
发布时间:2019-06-25

本文共 482 字,大约阅读时间需要 1 分钟。

kscreenshot

代码地址:

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

npm: npm install kscreenshot --save

demo图1:

图片描述

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

demo图2:

图片描述

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

demo图3:

图片描述

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

使用

import kscreenshot from 'kscreenshot'//65指键盘中的Anew kscreenshot(    {        key: 65     })

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

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

demo

图片描述

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

转载地址:http://wqgxo.baihongyu.com/

你可能感兴趣的文章
转:tar 常用命令
查看>>
软件工程结对作业01
查看>>
JZ-C-26
查看>>
Ng线性回归实现学习[转载]
查看>>
express的proxy实现前后端分离
查看>>
第一个 Metro程序(空白应用程序)
查看>>
面向对象----方法的重载
查看>>
[NOIP2013] 火柴排队
查看>>
控件(文本类): TextBlock
查看>>
Linq to DataSet
查看>>
surfaceView和Camera配合进行摄像头的预览
查看>>
date和long的相互转换
查看>>
剑指Offer 05 替换空格
查看>>
保持控件和容器之间的相对位置
查看>>
转:session和cookie以及catch三者的区别
查看>>
20060908: 天极网谴责百度
查看>>
单链表
查看>>
第八章 蜂鸣器驱动
查看>>
CDOJ 31 饭卡(card) 解题报告
查看>>
关于Azure Auto Scale的高级属性配置
查看>>