一款實用的前端截圖工具

這是一款基本涵蓋了截圖所有功能的截圖工具。

npm:

npm install kscreenshot --save複製代碼

demo圖1:

一款實用的前端截圖工具

如上圖所示,用戶可對截圖框進行拖拽,並且工具欄能隨著截圖框與可視區域的位置動態顯示在可視區域範圍內。

demo圖2:

一款實用的前端截圖工具

如上圖所示,用戶可拖動截圖框四周的拖拽點以及拖拽線進行隨意拖動。

demo圖3:

一款實用的前端截圖工具

如上圖所示,用戶可使用工具欄中的各個工具對截圖進行繪製。工具欄從左到右分別為:顏色版,橢圓,矩形,線條,箭頭,後退和完成。當用戶在進行繪製後無法在對截圖框進行拖拽工作,除非使用後退功能直到無繪製時才能繼續拖拽。

一款實用的前端截圖工具

該截圖工具帶有兩個參數:1.觸發按鍵;2.一個返回絕對路徑的函數

當程序初始化後,當按下shift + A時,頁面將會觸發截圖功能,用戶可根據上面的demo圖示例進行截圖。當完成繪製後,按下工具欄的完成按鈕,將會觸發第二個參數,該函數會帶有一個base64碼(即截圖後的圖片),用戶可根據該base64碼進行一些簡單操作,並需要將這base64碼形成一個絕對路徑的地址,返回後即可進行復制功能,同時下載該圖片。

鏈接:https://juejin.im/post/5b3b6d785188251b1d4736a0


分享到:


相關文章: