YouTubeの動画のスクショを撮る

by utgwkk 2019-07-07 [2019/07/07 15:17:37]

YouTubeの動画の現在位置のスクリーンショットを撮って、新しいタブに表示します。

@@ -9,8 +9,8 @@
     const query = '.video-stream.html5-main-video';
     const video = document.querySelector(query);
     const canvas = document.createElement('canvas');
-    canvas.width = parseInt(video.style.width, 10);
-    canvas.height = parseInt(video.style.height, 10);
+    canvas.width = parseInt(video.style.width, 10) || 960;
+    canvas.height = parseInt(video.style.height, 10) || 540;
     const ctx = canvas.getContext('2d');
     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
     const url = canvas.toDataURL('application/octet-stream');

• /*
   * @title YouTubeの動画のスクショを撮る
   * @description YouTubeの動画の現在位置のスクリーンショットを撮って、新しいタブに表示します。
   * @include https://www.youtube.com/*
   * @license MIT License
   * @javascript_url
   */
  (() => {
      const query = '.video-stream.html5-main-video';
      const video = document.querySelector(query);
      const canvas = document.createElement('canvas');
      canvas.width = parseInt(video.style.width, 10) || 960;
      canvas.height = parseInt(video.style.height, 10) || 540;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      const url = canvas.toDataURL('application/octet-stream');
      const newWindow = window.open('about:blank');
      newWindow.document.write(`<img src="${url}">`);
  })()

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。