有時候要做影片縮圖的時候想截圖 Youtube 影片，但又不想複製到他的播放按鈕跟進度條。透過 yt-dlp 或其他工具先將影片完整下載，好像又有點大砲打小鳥，大才小用的感覺。之前都是螢幕截一個比較小的圖，直接避開播放進度條擋路的問題。
當時覺得好像沒有簡單的方法。直到我測試出這篇。直接用 JavaScript 抓取 video object 進行截圖。
程式碼片段是東拼西湊起來的。
靈感來源
- 自己寫的文章，兩倍速看 FaceBook 影片
- 網路上搜尋有篇解釋如何產生 video 截圖
- 另一篇教如何下載 data url 。
測試過後目前是可用的。開啟 Youtube 影片頁面，先暫停到想要複製的影片時間點，打開 devtools console ，複製以下的片段貼上並按下 Enter ，就可以截圖並下載了。如果有什麼問題歡迎留言問我。
var canvas = document.createElement('canvas');
var video = $$('video')[0];
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height );
var image = canvas.toDataURL('image/jpeg');
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
downloadURI(image, 'thumbnail')
下載實測
一般的網頁截圖
此外，如果要在一般的網頁截圖，也可以使用 Chrome devtools 。你可以在 elements panel 直接對 DOM 按右鍵選擇截圖。
Leave a Reply