[網頁截圖] 好用的Chrome 擴充工具

Bee Weng
buzz。buzz。buzz。。。
4 min readMay 10, 2017

Awesome Screenshot

來分享一個自己使用了好幾年的chrome小工具

截圖工具在mac上來說很便利,自己就超常用快速鍵⇧+⌘+4 來截圖

不過也常遇到網站內容很長又需要截圖的時候

這時 Awesome Screenshot 這小工具就派上用場啦!

2017.05.09 更新版本

1_Capture visible part of page

依瀏覽器可見範圍截圖

就是…瀏覽器框框如果你拉成扁的,你的圖就會是扁的~

像在公司用的是27吋螢幕,如果瀏覽器開到最大存下來的圖就超大張的!

下方有個碼錶icon的是有點像手機自拍倒數~ 倒數3秒喀喳!

快數鍵 Ctrl + Shift +V

2_Capture selected area

依選取範圍截圖

按下按鈕後或使用快速鍵,畫面會變成灰色,游標會出現十字

就可以隨意拖拉你想要擷取的範圍,可以一直往下拉

放開滑鼠就可看見選取的範圍,範圍四邊還可以做調整,左上方有顯示尺寸

確定後點擊 capture 即可

快數鍵 Ctrl + Shift +S

3_Capture selected area

擷取整個頁面

如果遇到網站內容好長,不想用拖拉的,就用這個吧~

超快速! 一整頁的內容都幫你截取下來

有些滾動視差的網站可能就沒辦法用這個方法了

用錄的可能比較好,等等會講到錄影功能~

快數鍵 Ctrl + Shift +E

4_編輯頁面

以上三種截圖方式都會先到這個頁面,可編輯剛剛截取到的圖片

上方有些簡易的功能,可以重新裁剪、筆刷、方框、圓框、文字、箭頭線條

線條可以變更粗細、文字支援12種英文字體,也提供16種顏色可以使用

還有一個模糊的功能還蠻有趣的

不需要編輯或是已經編輯好了,就按下右上方的Done

5_儲存頁面

其實從截圖到最後的儲存頁應該不用5秒,很快的

可以選擇下載圖片/複製圖片/列印圖片,也可連接 Google Drive 存在雲端上

預設下載圖片是png檔,如果要改成jpg ,請到options 裡面設定

也可以改快數鍵的配置~

6_Select a local image

選擇本地圖片進行編輯

這功能也蠻方便的,可以上傳自己電腦裡的圖片

就會進入到編輯頁面去,做完編輯後再儲存!

7_Record Screen

頁面錄影

這是2107.05.09 更新後的新功能

上方先選擇要錄製當前瀏覽器頁面還是整個螢幕範圍

再來可以設定按下 START 後幾秒才開始錄影、錄製聲音開關

免費版可以錄製30秒,時間要更長就要升級了

錄製時icon會顯示錄影時間

錄製完成後會跳至儲存畫面

這邊可以直接上傳至 Youtube 或儲存到 Google Drive

也提供下載,下載下來的檔案是 webm

這小工具已經發行很多年了,可能很多人早就在使用

或者有比這個更好的,這幾天看到它還在持續更新,覺得很不錯

就來寫了一篇文章,歡迎一起討論好用的工具喔!

安裝 Awesome Screenshot

推薦另一個網頁截圖小工具 Full Page Screen Capture是專門儲存整頁的工具,很快也很方便

有機會再上來分享自己常用的chrome小工具吧

--

--