程式開發

乾淨的 YouTube 截圖怎麼截?一個書籤就可以

我覺得我的文章風格越來越隨興,這篇文章的標題也是很鬧,內容應該也很鬧。總之最近在弄某些東西想要擷取 YouTube 某個畫面,所以花了點時間寫了腳本,同時來衝一下文章數。

廢話就不多說了,先上腳本:


javascript:(()=>{let cv=document.createElement("canvas"),c=cv.getContext("2d"),vid=document.querySelector("video");cv.width=vid.videoWidth,cv.height=vid.videoHeight,c.drawImage(vid,0,0);let a=document.body.appendChild(document.createElement("a"));a.href=cv.toDataURL(),a.download="YouTube u622Au5716.png",a.click(),a.remove(),cv.remove();})()

新增書籤,把這段貼到網址。

Firefox on Ubuntu
Chrome on Ubuntu

大多數人這樣就夠了,當你需要截圖時,點擊這個書籤就可以存檔了(記得先調整好畫質)。但一定有好學的好朋友們想知道這到底怎麼做到的,接下來就來解析。
首先,先把這份壓縮過的 Code 還原:


let cv = document.createElement('canvas');
let c = cv.getContext('2d');
let vid = document.querySelector('video');
cv.width = vid.videoWidth;
cv.height = vid.videoHeight;
c.drawImage(vid, 0, 0);
let a = document.body.appendChild(document.createElement('a'));
a.href=cv.toDataURL();
a.download='Youtube 截圖';
a.click();
a.remove();
cv.remove();

學過 JavaScript 並且熟悉 HTML 的朋友應該不難望文生義,但既然會往下拉大概就是不太熟,那就開始分解囉。
首先是


let cv = document.createElement('canvas');
let c = cv.getContext('2d');

這裡我們先在文件中加入 Canvas 元素,用來存放截圖的資料。並且取得 Context,簡單理解就是取得畫筆。
然後


let vid = document.querySelector('video');
cv.width = vid.videoWidth;
cv.height = vid.videoHeight;
c.drawImage(vid, 0, 0);

則是取得影片元素,由於 YouTube 頁面只有一個 Video 元素,所以直接這樣取得。然後將畫布的大小和影片大小同步,以免空間不夠畫,最後把 Video 元素畫上去就完成了。
畫完之後,我們必須將他轉換成檔案,這邊的方式是轉換成下載連結:


let a = document.body.appendChild(document.createElement('a'));
a.href=cv.toDataURL();
a.download='Youtube 截圖';

與前面加入 Canvas 元素時相同,這邊創造一個 A 元素(即連結),然後把畫布內容轉換成 Data URL,不熟悉的朋友不要緊,Data URL 意思就是 URL 本身即資料。接著把連結的指向設為 Data URL,再設置 download 屬性來告訴瀏覽器要用下載的。


a.click();
a.remove();
cv.remove();

有了下載連結,我們這邊模擬點擊來觸發下載,觸發後就可以刪除前面創造的元素。
到這邊就把整個的流程介紹完畢了,再來是一些個人的心得。
在一開始,我是直接用 open(cv.toDataURL()),但在 Chrome 測試時才發現 Chrome 阻擋了 Data URL 載入,於是改用模擬連結。但回到 Firefox 又不能動了,稍微查了一下了解是 Firefox 的 Click 行為沒辦法作用在不在文件的元素(?),所以得把元素加進文件。這樣子多了幾行之後總算都可以動了,但因為沒有 Opera 和 IE 可以測,我也懶的裝來測,就算了。
好累喔,晚安。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *