巴哈姆特動畫瘋影片擷圖小工具

ReadMe.md

巴哈姆特動畫瘋影片擷圖小工具 - PNG 版本

在動畫瘋的頁面可針對影片進行不含彈幕的擷圖。

0. 安裝前置：

這 script 是依靠 Tampermonkey extension 運作的
請確認已安裝好相應套件

1. 安裝腳本：

此程式根據 原作者 的專案做修改，先從原作者的程式安裝連結取得原本的 script，然後開啟 Tampermonkey > 控制台 (Dashboard) > 點擊「巴哈姆特動畫瘋影片擷圖小工具」右方的編輯按鈕，再把這裡的 UserScript.js 覆寫上去

2. 使用

影片載入後，

1. 點擊影片控制列上的擷圖鈕即可自動儲存擷圖 (png)
2. 也可連點兩下 S鍵 擷圖

圖片檔名會是：影片標題_時-分-秒.png

PUI PUI 天竺鼠車車 [4]_01-03-32.png

PS: Bookmarklet 形式

不想安裝的額外套件的，也可直接用 bookmarklet 形式
將擷圖程式放在書籤列，點擊書籤時進行擷圖並存檔

因為 Gist 不能將 javascript 塞進連結裡，請自行依下列步驟處理

1. 請先將下面連結拖至書籤列 動畫瘋擷圖
2. 滑鼠右鍵編輯剛剛的書籤，將網址那欄改為下面(bookmarklet)的程式碼
3. 要擷圖時點一下書籤就可以存檔了

bookmarklet.js

javascript: (function() {
  let video = getVideo();
  let title = document.querySelector('h1')?.textContent || document.title;
  if (!video) {
    alert('影片尚未準備好');
    return;
  }

  screenshot(video, title);

  function screenshot(video, title) {
    const currentTimeStr = new Date(video.currentTime * 1000).toISOString().slice(11, 19).replace(/\:/g, '-');
    const fn = title + '_' + currentTimeStr + '.png';
    saveImage(getImgDataUrl(video), fn);
  }

  function getVideo() {
    return document.getElementById('ani_video_html5_api') || document.querySelector('video');
  }

  function getImgDataUrl(videoEl, scale = window.devicePixelRatio || 1) {
    const canvas = document.createElement('canvas');
    canvas.width = videoEl.videoWidth * scale;
    canvas.height = videoEl.videoHeight * scale;
    canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height);

    return canvas.toDataURL('image/png');
  }

  function saveImage(imgSrc, filename) {
    var link = window.document.createElement('a');
    link.href = imgSrc;
    link.target = '_img';
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
})();

UserScript.js

// ==UserScript==
// @name         巴哈姆特動畫瘋影片擷圖小工具
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  try to take over the world!
// @author       Rplus
// @match        https://ani.gamer.com.tw/animeVideo.php?sn=*
// @grant        none
// ==/UserScript==

(function() {
  let video = getVideo();
  let title = '';

  window.addEventListener('load', () => {
    video = getVideo();
    if (video) {
      init();
    } else {
      console.log('load video GG, wait 5s');
      delayInit();
    }
  });

  function delayInit() {
    setTimeout(() => {
      if (!window.videojs) {
        delayInit();
      } else {
        init();
      }
    }, 1000);
  }

  function init() {
    video = getVideo();
    title = document.querySelector('h1')?.textContent || document.title;

    console.log('load');
    if (!video) { return; }

    let sKeyTime = 0;

    {
      // inject screenshot button
      const bar = document.querySelector('.control-bar-rightbtn');

      if (!bar) { return; }
      const btn = document.createElement('div');
      btn.className = 'vjs-button vjs-control vjs-playback-rate';
      btn.innerHTML = `<div class="vjs-playback-rate-value">擷圖</div>`
      btn.addEventListener('click', () => screenshot(video, title));
      bar.appendChild(btn);
    }

    document.addEventListener('keydown', handleKeyDown);

    function handleKeyDown(e) {
      if (e.code !== 'KeyS') { return; }

      const now = +new Date();
      if (now - sKeyTime > 500) {
        sKeyTime = now;
        return;
      }

      console.log('ss');
      sKeyTime = 0;
      screenshot(video, title);
    }
  }

  function screenshot(video, title) {
    const currentTimeStr = new Date(video.currentTime * 1000).toISOString().slice(11, 19).replace(/\:/g, '-');
    const fn = title + '_' + currentTimeStr + '.png'
    saveImage(getImgDataUrl(video), fn);
  }

  function getVideo() {
    return document.getElementById('ani_video_html5_api') || document.querySelector('video');
  }

  function getImgDataUrl(videoEl, scale = window.devicePixelRatio || 1) {
    const canvas = document.createElement('canvas');
    canvas.width = videoEl.videoWidth * scale;
    canvas.height = videoEl.videoHeight * scale;
    canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height);

    return canvas.toDataURL('image/png');
  }

  function saveImage(imgSrc, filename) {
    var link = window.document.createElement('a');
    link.href = imgSrc;
    link.target = '_img';
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
})();