主題

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

一尺十寸 | 2021-01-23 12:46:04 | 巴幣 10 | 人氣 274

寫了支簡單的小工具，讓動畫瘋可以影片擷圖~

巴哈姆特動畫瘋影片擷圖小工具
https://greasyfork.org/zh-TW/scripts/420561

# 巴哈姆特動畫瘋影片擷圖小工具
https://greasyfork.org/zh-TW/scripts/420561

安裝前置：
這 script 是依靠 Tampermonkey extension 運作的
請確認有安裝

安裝網址：
https://greasyfork.org/zh-TW/scripts/420561

## 使用
影片載入後，

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

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

Bookmarklet 形式

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

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

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

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 + '.jpg';
    saveImage(getImgDataUrl(video), fn);
  }

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

  function getImgDataUrl(videoEl, scale = window.devicePixelRatio || 1) {
    scale = scale || 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/jpeg', 1.0);
  }

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

巴哈上code工具: https://ren1244.github.io/HighlightToBBCode/