☰

YouTube screenshot

Adds a screenshot button to YouTube video page

  1. // ==UserScript==
  2. // @name        YouTube screenshot
  3. // @namespace   https://github.com/qiwichupa/userscripts/blob/master/youtube_screenshot__userscript
  4. // @homepage    https://greasyfork.org/ru/scripts/455155-youtube-screenshot
  5. // @author      qiwichupa
  6. // @version     20221120.2147
  7. // @description Adds a screenshot button to YouTube video page
  8. // @match       *://www.youtube.com/*
  9. // @match       *://youtube.com/*
  10. // @run-at      document-end
  11. // @require     http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
  12. // @grant        none
  13. // @license           GNU General Public License v2.0 or later
  14. // ==/UserScript==
  15.  
  16. this.$ = this.jQuery = jQuery.noConflict(true);
  17. $(function () {
  18.  
  19.     "use strict";
  20.     addScreenshotSupport();
  21.     document.body.addEventListener("yt-navigate-finish", function (event) {
  22.         addScreenshotSupport();
  23.     });
  24.  
  25.  
  26.     function addScreenshotSupport(firstLoad) {
  27.         if (isVideoPage()) {
  28.             waitForElement("upload-info", function () {
  29.                 addScreenshotButton();
  30.             }, 330);
  31.         }
  32.     }
  33.  
  34.  
  35.     function waitForElement(elementId, callbackFunction, intervalLength = 330) {
  36.         var waitCount = 15000 / intervalLength; // wait 15 seconds maximum
  37.         var wait = setInterval(function () {
  38.             waitCount--;
  39.             if ($("#" + elementId).length > 0) {
  40.                 callbackFunction();
  41.                 clearInterval(wait);
  42.             } else if (waitCount <= 0) {
  43.                 console.log("YouTube RSS Feed UserScript - wait for element \"#" + elementId +
  44.                         "\" failed! Time limit (15 seconds) exceeded.");
  45.                 clearInterval(wait);
  46.             }
  47.         }, intervalLength);
  48.     }
  49.  
  50.     function isVideoPage() {
  51.         return document.URL.indexOf("/watch") !== -1 && document.URL.indexOf("v=") !== -1;
  52.     }
  53.  
  54.  
  55.     function addScreenshotButton() {
  56.         if ($("#ScreenshotButton").length > 0) {
  57.             $("#ScreenshotButton").remove();
  58.         }
  59.         $("#subscribe-button")
  60.                 .css({
  61.                     "display": "flex",
  62.                     "flex-flow": "nowrap",
  63.                     "height": "37px"
  64.                 })
  65.                 .prepend(styleOfScreenshotButton());
  66.       $("#ScreenshotButton").click (makeScreenshot);
  67.     }
  68.  
  69.  
  70.     function styleOfScreenshotButton() {
  71.         return $('<button id="ScreenshotButton" onclick="makeScreenshot()">SHOT</button>')
  72.                 .css({
  73.                     "background-color": "#fd9b12",
  74.                     "border-radius": "3px",
  75.                     "padding": "10px 16px",
  76.                     "color": "#ffffff",
  77.                     "font-size": "14px",
  78.                     "text-decoration": "none",
  79.                     "text-transform": "uppercase",
  80.                     "margin-right": "5px"
  81.                 });
  82.     }
  83.  
  84.  
  85.     function makeScreenshot () {
  86.         // original code: https://github.com/ReeganExE/youtube-screenshot
  87.         // and https://github.com/ParticleCore/Iridium
  88.         var screen_shot_container;
  89.         var canvas;
  90.         var video;
  91.         var aspect_ratio;
  92.         var canvas_context;
  93.         var aspect_ratio;
  94.         var canvas_width;
  95.         var canvas_height;
  96.         var base64ImageData;
  97.         var filename;
  98.         var a;
  99.         var img;
  100.  
  101.         if (!(screen_shot_container = document.getElementById("us-screen-shot-container"))) {
  102.  
  103.                               screen_shot_container           = document.createElement("template");
  104.                               screen_shot_container.innerHTML =
  105.                                   "<div id='us-screen-shot-container'>" +
  106.                                   "    <a target='_blank' download data-locale='title|screen_shot_title'>" +
  107.                                   "        <canvas></canvas>" +
  108.                                   "    </a>" +
  109.                                   "</div>";
  110.                               screen_shot_container           = screen_shot_container.content;
  111.  
  112.                           }
  113.  
  114.         canvas = screen_shot_container.querySelector("canvas");
  115.         video = document.querySelector('video');
  116.         aspect_ratio   = video.videoWidth / video.videoHeight;
  117.  
  118.         // Change the size here
  119.         canvas_context = canvas.getContext("2d");
  120.         aspect_ratio   = video.videoWidth / video.videoHeight;
  121.         canvas_width   = video.videoWidth;
  122.         canvas_height  = parseInt(canvas_width / aspect_ratio, 10);
  123.         canvas.width   = canvas_width;
  124.         canvas.height  = canvas_height;
  125.         canvas_context.drawImage(video, 0, 0, canvas_width, canvas_height);
  126.  
  127.         // Won't work on file:/// URLs. SecurityError: Tainted canvases may not be exported.
  128.         base64ImageData = canvas.toDataURL('image/jpeg');
  129.         filename = 'snap-' + canvas.width + 'x' + canvas.height + '-' + video.currentTime + '.jpg';
  130.  
  131.         // Wrap <img> in link to download image because
  132.         // the context menu Save Image as... is blocked for security reasons
  133.         a = document.createElement('a');
  134.         a.download = filename;
  135.         a.href = base64ImageData;
  136.  
  137.         img = document.createElement('img');
  138.         img.src = base64ImageData;
  139.         img.alt = filename;
  140.         img.title = 'Click to save ' + filename;
  141.  
  142.         window.open().document.body.appendChild(a).appendChild(img);
  143.  
  144.     }
  145.  
  146. });