一款实用的前端截图工具

代码地址： github  码云

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

npm: 

npm install kscreenshot --save复制代码

demo图1：

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

demo图2：

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

demo图3：

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

使用

import kscreenshot from 'kscreenshot'

//65指键盘中的A
new kscreenshot(65, function (base64) {
    return 'https://www.baidu.com/img/bd_logo1.png'
})复制代码

该截图工具带有两个参数：1.触发按键；2.一个返回绝对路径的函数

当程序初始化后，当按下shift + A时，页面将会触发截图功能，用户可根据上面的demo图示例进行截图。当完成绘制后，按下工具栏的完成按钮，将会触发第二个参数，该函数会带有一个base64码（即截图后的图片），用户可根据该base64码进行一些简单操做，并须要将这base64码造成一个绝对路径的地址，返回后便可进行复制功能，同时下载该图片。