一款實用的前端截圖工具

kejiacheng發表於2018-07-03
程式碼地址: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碼形成一個絕對路徑的地址,返回後即可進行復制功能,同時下載該圖片。


相關文章