Station B wants to cut some expression packs when watching the video, but it can't find a more convenient way. If the screenshot software is used, there will be a pause mark (╯｀) ╯ (┻━┻) ╯ (┻┻┻┻┻) if it doesn't pause the speed of the postgraduate entrance examination and the speed of the software response

The implementation effect is as follows: for the same page, after pause, use ctrl + shift + s screenshot to save and filter subtitles and pause tags

Installation address Screenshot tool of station B

The idea is to draw the data in video to canvas, and then download it

You need to set different canvas sizes for different sharpness

(function() {
  "use strict";

  // Get the currently playing video label
  function getVideo() {
    return document.getElementsByTagName("video")[0];
  }

  // Get the canvas size according to the definition
  function getSize() {
    let text =
      (
        document.getElementsByClassName(
          "bui-select-item bui-select-item-active"
        )[0] || {}
      ).innerText || "default";
    let sizeMap = {
      "360P": {
        width: 460,
        height: 360
      },
      "480P": {
        width: 640,
        height: 480
      },
      "720P": {
        width: 1080,
        height: 720
      },
      "1080P": {
        width: 1920,
        height: 1080
      },
      "1080P+": {
        width: 1080,
        height: 1920
      }
    };

    let sizeList = ["360P", "480P", "720P", "1080P", "1080P+"];
    for (let i of sizeList)
      if (text.includes(i)) {
        console.log("Picture quality", i);
        let video = getVideo();
        let { width, height } = video.getBoundingClientRect();
        let r = height / width;
        // Maintain the aspect ratio of the player and avoid stretching
        // Keep width
        let size = sizeMap[i];
        size.height = size.width * r;
        return size;
      }

    return sizeMap["480P"];
  }

  function capture() {
    let video = getVideo();
    if (!video) {
      window.alert("Please confirm that the page contains video");
      return;
    }
    console.log("video", video);
    let canvas = document.createElement("canvas");
    let { width, height } = getSize();
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.toBlob(
      blob => {
        let link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        let filename = `${document.title}_${+new Date()}.jpg`;
        link.download = filename;
        link.innerText = filename;
        link.click();
      },
      "image/png",
      1 // [0,1] for picture quality
    );
  }

  function init() {
    document.addEventListener("keydown", e => {
      // ctrl shift s
      if (e.ctrlKey && e.shiftKey && e.keyCode === 83) {
        e.preventDefault();
        e.stopPropagation();
        capture();
      }
    });
  }

  window.addEventListener("load", init, false);
})();

Publish to grayfork and provide the github address for updating