我覺得我的文章風格越來越隨興，這篇文章的標題也是很鬧，內容應該也很鬧。總之最近在弄某些東西想要擷取 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 可以測，我也懶的裝來測，就算了。
好累喔，晚安。
