Screen Capture: Difference between revisions
Jump to navigation
Jump to search
→網頁畫面擷取
(→網頁畫面擷取: + puppeteer) |
(→網頁畫面擷取) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 35: | Line 35: | ||
=== 網頁畫面擷取 === | === 網頁畫面擷取 === | ||
擷取需要捲頁的網頁畫面 (網頁快照) | 擷取需要捲頁的網頁畫面 (網頁快照) | ||
* {{Gd}} [https://www.microsoft.com/zh-tw/edge?r=1 Microsoft Edge 網頁瀏覽器]：可擷取需要捲頁的網頁畫面或選擇區域的畫面。教學：[https://walker-a.com/archives/6496 Microsoft Edge 內建 網頁擷取 功能，不用安裝任何外掛功能 - 挨踢路人甲] | |||
* {{Gd}} [https://chrome.google.com/webstore/detail/save-to-google-drive/gmbmikajjgmnabiglmofipeabaddhgne Save to Google Drive] for {{Chrome}}: capture the visible or whole web page and upload to Google Drive. {{access | date=2015-01-28}} | * {{Gd}} [https://chrome.google.com/webstore/detail/save-to-google-drive/gmbmikajjgmnabiglmofipeabaddhgne Save to Google Drive] for {{Chrome}}: capture the visible or whole web page and upload to Google Drive. {{access | date=2015-01-28}} | ||
| Line 43: | Line 45: | ||
** allow to grab flash snapshot: Yes , capture Flash content in Firefox 3 (With [http://pearlcrescent.com/products/pagesaver/whatsnew/2.0.html Page Saver 2.0]) | ** allow to grab flash snapshot: Yes , capture Flash content in Firefox 3 (With [http://pearlcrescent.com/products/pagesaver/whatsnew/2.0.html Page Saver 2.0]) | ||
* {{Chrome}} | * {{Chrome}} | ||
*# | *# 在 Chrome 中按下快速鍵 {{kbd | key=Option}} + {{kbd | key=Command}} + {{kbd | key=I}}，開啟「開發人員工具」(DevTools) | ||
*# 打開「開發人員工具」後，{{Win}} 輸入按鍵: {{kbd | key=ctrl}} + {{kbd | key=shift}} + {{kbd | key=p}} ; {{Mac}} 輸入按鍵: {{kbd | key=⌘ command}} + {{kbd | key=shift}} + {{kbd | key=p}} 打開「command menu」 | |||
*# 輸入關鍵字 screenshoot 有三種模式可以選擇 | *# 輸入關鍵字 screenshoot 有三種模式可以選擇 | ||
*#* (1) Capture full screenshot 擷取需要捲頁的網頁畫面 | *#* (1) Capture full size screenshot 擷取需要捲頁的網頁畫面 | ||
*#* (2) Capture node screenshot 擷取某個節點區塊的畫面，使用前要先選取某個節點 | *#* (2) Capture node screenshot 擷取某個節點區塊的畫面，使用前要先選取某個節點 | ||
*#* (3) Capture screenshot 擷取當下視窗畫面 (如果「開發人員工具」開啟並 dock to bottom，反而造成畫面區域變小)<ref>[https://umaar.com/dev-tips/151-screenshot-capture/ Capture Screenshot - Chrome DevTools - Dev Tips]</ref> | *#* (3) Capture screenshot 擷取當下視窗畫面 (如果「開發人員工具」開啟並 dock to bottom，反而造成畫面區域變小)<ref>[https://umaar.com/dev-tips/151-screenshot-capture/ Capture Screenshot - Chrome DevTools - Dev Tips]</ref><ref>[https://support.google.com/chromebook/answer/10474268?hl=en Take a screenshot or record your screen - Chromebook Help]</ref> | ||
* DevTools for {{Chrome}} v.59 [https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots Full-page screenshots] 打開「開發人員工具」-> Toggle device toolbar | * DevTools for {{Chrome}} v.59 [https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots Full-page screenshots] 打開「開發人員工具」-> Toggle device toolbar | ||