☰

HTML5 Video Frame Screenshot

Adds ability to take a screenshot from the current frame of a HTML5 video element and be saved to a file named "video_frame.jpg" or "video_frame.png" (image format is configurable). This script is intended to be used as a bookmarklet using this URL: javascript:hvfs_ujs()

  1. // ==UserScript==
  2. // @name         HTML5 Video Frame Screenshot
  3. // @namespace    https://greasyfork.org/en/users/85671-jcunews
  4. // @version      1.0.5
  5. // @license      GNU AGPLv3
  6. // @description  Adds ability to take a screenshot from the current frame of a HTML5 video element and be saved to a file named "video_frame.jpg" or "video_frame.png" (image format is configurable). This script is intended to be used as a bookmarklet using this URL: javascript:hvfs_ujs()
  7. // @author       jcunews
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.  
  14.   //=== CONFIGURATION BEGIN ===
  15.   var imageFormat = "jpeg"; //can be one of these: jpeg, png
  16.   //=== CONFIGURATION END ===
  17.  
  18.   window.hvfs_ujs = function(ele, cv) {
  19.     if (ele = document.querySelector("video")) {
  20.       cv = document.createElement("CANVAS");
  21.       if (cv.width = ele.videoWidth) {
  22.         cv.height = ele.videoHeight;
  23.         cv.getContext("2d").drawImage(ele, 0, 0);
  24.         ele = document.createElement("A");
  25.         ele.href = cv.toDataURL("image/" + imageFormat);
  26.         ele.download = "video_frame." + (imageFormat === "jpeg" ? "jpg" : imageFormat);
  27.         ele.style.visibility = "hidden";
  28.         document.body.appendChild(ele).click();
  29.         ele.remove();
  30.         return;
  31.       } else {
  32.         alert("The HTML5 video media has not been loaded yet.");
  33.       }
  34.     } else {
  35.       alert("There is no HTML5 video on this page.");
  36.     }
  37.   };
  38.  
  39. })();