Chrome extension 如何做到 screenshot 功能 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

Chrome extension 如何做到 screenshot 功能

chrome extension screenshot html html2canvas javascript

Kurt 2024-07-31 09:38:28 ‧ 187 瀏覽

分享至

近期在開發一個 Chrome extension，其中我需要實做一個可以截取整個網頁畫面的功能，我嘗試用一些 HTML 轉 Image 的 library(html2canvas, dom-to-image..)，但是都會遇到一些問題，例如圖片的部分會有 CORS 的問題，另外一個是在轉的過程中 library 會丟出 exception。

我參考了 Awesome screenshot，感覺他們不像是用 HTML 轉成 Image 的這種方式，有大大可以提供點線索關於這方面的技術 keyword 嗎？

看更多先前的討論...收起先前的討論...

DanSnow iT邦好手 1 級 ‧ 2024-07-31 09:45:27 檢舉

我猜他們是用螢幕分享的功能，再去截取分享出來的畫面，不過既然你在寫 extension ，那 CORS 只需要用 extension background 的 service worker 去幫忙載回來就沒有 CORS 的問題了吧

froce iT邦大師 1 級 ‧ 2024-07-31 10:21:56 檢舉

https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/logicalSurface

現在應該沒什麼人會用整個轉CANVAS的方法去做了。

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:19:55 檢舉

謝謝提供建議以及資訊！

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:20:51 檢舉

轉 canvas 的方法在這種要擷取他人網站上好像會遇到很多問題

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

2 個回答

0

YC

iT邦研究生 1 級 ‧ 2024-07-31 10:45:18

笨方法，
用chrome.tabs.captureVisibleTab一張張黏起來

回應 1
分享
檢舉

Kurt iT邦新手 4 級 ‧ 2024-07-31 11:23:14 檢舉

目前是用這個 method 去截圖沒錯，但因為我要截圖的網站中，不少 scroll bar 都是在 table 裡面，感覺這部分要可以完全掌控好困難QQ
可能要一一去判斷是否有 scroll bar 之類的（？

登入發表回應

0

jo60913

iT邦見習生 ‧ 2024-07-31 11:39:30

GoFullPage 這個擴充元件也是螢幕的長截圖
https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
github
https://github.com/mrcoles/full-page-screen-capture-chrome-extension/tree/master

api.js中的capture這個方法應該是截圖的運作

不知道不可以參考看看

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙