一款實用的前端截圖工具

代碼地址： 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碼造成一個絕對路徑的地址，返回後便可進行復制功能，同時下載該圖片。