github
Yards cloud


This is a basic cover screenshots of all the functions of the screenshots tool.


npm: 

npm install kscreenshot --saveCopy the code

The demo figure 1:



As shown in the figure above, the user can drag and drop the screenshot box, and the toolbar can dynamically display in the viewable area with the position of the screenshot box and the viewable area.

The demo figure 2:



As shown in the image above, the user can drag drag points and drag lines around the screenshot box.

The demo figure 3:



As shown in the figure above, the user can use various tools in the toolbar to draw the screenshot. The toolbars from left to right are: Color plate, Ellipse, Rectangle, Line, Arrow, Back and Finish. The user cannot drag and drop the screenshot box after drawing, unless the user uses the back function until there is no drawing.


use

import kscreenshot from 'kscreenshot'// A new kscreenshot from A screenshot(65,function (base64) {
    return 'https://www.baidu.com/img/bd_logo1.png'
})Copy the code

The screenshot tool has two parameters: 1. Trigger button; 2. A function that returns an absolute path

After the program is initialized, the screenshot function is triggered when you press Shift + A. You can take A screenshot based on the previous demo figure. When drawing finished, press the complete button in the toolbar, will trigger the second parameter, the function will have a base64 code (that is, after the screenshot pictures), the user can according to the base64 code for some simple operation, and need to be the base64 code form an absolute path to address, return can replicate function, at the same time to download the images.