Save youtube screenshot bookmarklet

bookmarklet.js

javascript:(function()%7Bfunction%20prettyLocalDate(d)%20%7B%0A%20%20var%20millis%20%3D%20d.getTime()%20-%20(d.getTimezoneOffset()%20*%2060000)%3B%0A%20%20d.setTime(millis)%3B%0A%20%20return%20d.toISOString().slice(0%2C%2016).replace('T'%2C%20'--')%3B%0A%7D%0A%0A%0Afunction%20saveBlobAs(blob%2C%20name)%20%7B%0A%20%20%22use%20strict%22%3B%0A%0A%20%20var%20a%20%3D%20document.createElement(%22a%22)%3B%0A%20%20document.body.appendChild(a)%3B%0A%20%20a.style.cssText%20%3D%20%22display%3A%20none%22%3B%0A%0A%20%20var%20url%20%3D%20window.URL.createObjectURL(blob)%3B%0A%20%20a.href%20%3D%20url%3B%0A%20%20a.download%20%3D%20name%3B%0A%20%20a.click()%3B%0A%20%20window.URL.revokeObjectURL(url)%3B%0A%20%20a.parentNode.removeChild(a)%3B%0A%7D%0A%0Afunction%20makeVideoScreenshot()%20%7B%0A%20%20var%20vid%20%3D%20document.querySelector('video')%3B%0A%0A%20%20var%20canvas%20%3D%20document.createElement('canvas')%3B%0A%20%20var%20ctx%20%3D%20canvas.getContext('2d')%3B%0A%20%20if%20(!ctx)%20%7B%0A%20%20%20%20throw%20new%20Error(%22Error%20getting%20canvas%20context%22)%3B%0A%20%20%7D%0A%20%20const%20%7B%0A%20%20%20%20videoWidth%2C%0A%20%20%20%20videoHeight%0A%20%20%7D%20%3D%20vid%3B%0A%20%20canvas.setAttribute('width'%2C%20vid.videoWidth)%3B%0A%20%20canvas.setAttribute('height'%2C%20vid.videoHeight)%3B%0A%20%20ctx.drawImage(vid%2C%200%2C%200%2C%20videoWidth%2C%20videoHeight)%3B%0A%0A%20%20var%20kMIMEType%20%3D%20%22image%2Fpng%22%3B%0A%0A%20%20var%20blob%20%3D%20canvas.toBlob(function(blob)%20%7B%0A%20%20%20%20const%20title%20%3D%20document.querySelector('title').text.replace(%2F%5B%5E%5C.%5C%2C%5C-%5C_%5C%40%5C!%5C%24%20a-zA-Z0-9%D0%90-%D0%AF%D0%B0-%D1%8F()%5D%2B%2Fg%2C%20'_')%3B%0A%20%20%20%20const%20hostname%20%3D%20window.location.hostname%3B%0A%20%20%20%20const%20date%20%3D%20prettyLocalDate(new%20Date())%3B%0A%20%20%20%20const%20filename%20%3D%20%5Bdate%2C%20hostname%2C%20title%5D.join('__').slice(0%2C250)%20%2B%20'.png'%3B%0A%20%20%20%20saveBlobAs(blob%2C%20filename)%3B%0A%20%20%7D%2C%20kMIMEType)%3B%0A%7D%0A%0AmakeVideoScreenshot()%3B%7D)()%3B

create-youtube-screenshot.js

function prettyLocalDate(d) {
  let millis = d.getTime() - (d.getTimezoneOffset() * 60000);
  d.setTime(millis);
  return d.toISOString().slice(0, 16).replace('T', '--');
}


// From Gist: https://gist.github.com/yig/aeeb1ee67a13bea98f3d
function saveBlobAs(blob, name) {
  "use strict";

  // Inspired by Syntax: http://stackoverflow.com/questions/23451726/saving-binary-data-as-file-using-javascript-from-a-browser/23451803#23451803
  // Initially created to work around a bug in eligray/FileSaver.js
  // which prevented saving multiple files
  // (Issue 165: https://github.com/eligrey/FileSaver.js/issues/165 ).

  // Create a hidden `a` element.
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style.cssText = "display: none";

  // createObjectURL() will leak memory.
  var url = window.URL.createObjectURL(blob);
  a.href = url;
  a.download = name;
  a.click();
  window.URL.revokeObjectURL(url);
  a.parentNode.removeChild(a);
}

function makeVideoScreenshot() {
  const vid = document.querySelector('video');

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    throw new Error("Error getting canvas context");
  }
  const {
    videoWidth,
    videoHeight
  } = vid;
  canvas.setAttribute('width', vid.videoWidth);
  canvas.setAttribute('height', vid.videoHeight);
  ctx.drawImage(vid, 0, 0, videoWidth, videoHeight);

  var kMIMEType = "image/png";

  var blob = canvas.toBlob(function(blob) {
    const title = document.querySelector('title').text.replace(/[^\.\,\-\_\@\!\$ a-zA-Z0-9А-Яа-я()]+/g, '_');
    const hostname = window.location.hostname;
    const date = prettyLocalDate(new Date());
    const filename = [date, hostname, title].join('__').slice(0,250) + '.png';
    saveBlobAs(blob, filename);
  }, kMIMEType);
}

makeVideoScreenshot();