tampermonkey 编写B站视频截图脚本

tampermonkey 编写B站视频截图脚本

 

实现效果如下, 同样的页面, 暂停后使用 ctrl + shift + s 截图保存会过滤字幕和暂停标签

安装地址 B站截图工具

 

实现思路为 将video中的数据画到canvas中, 然后下载

需要对不同的清晰度, 设置不同的画布大小

(function() {
  "use strict";

  // 得到当前播放的video标签
  function getVideo() {
    return document.getElementsByTagName("video")[0];
  }

  // 根据清晰度, 获取画布大小
  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("图片质量", i);
        let video = getVideo();
        let { width, height } = video.getBoundingClientRect();
        let r = height / width;
        // 维持播放器的宽高比, 避免拉伸
        // 保持宽度
        let size = sizeMap[i];
        size.height = size.width * r;
        return size;
      }

    return sizeMap["480P"];
  }

  function capture() {
    let video = getVideo();
    if (!video) {
      window.alert("请确认页面中含有视频");
      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] 表示图片质量
    );
  }

  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);
})();

 

发布到greasyfork, 提供github地址, 以供更新