在動畫瘋的頁面可針對影片進行不含彈幕的擷圖。
這 script 是依靠 Tampermonkey extension 運作的
請確認已安裝好相應套件
此程式根據 原作者 的專案做修改，先從原作者的程式安裝連結取得原本的 script，然後開啟 Tampermonkey > 控制台 (Dashboard) > 點擊「巴哈姆特動畫瘋影片擷圖小工具」右方的編輯按鈕，再把這裡的 UserScript.js 覆寫上去
影片載入後，
S鍵 擷圖圖片檔名會是：影片標題_時-分-秒.png
PUI PUI 天竺鼠車車 [4]_01-03-32.png
不想安裝的額外套件的，也可直接用 bookmarklet 形式
將擷圖程式放在書籤列，點擊書籤時進行擷圖並存檔
因為 Gist 不能將 javascript 塞進連結裡，請自行依下列步驟處理
| 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== | |
| // @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); | |
| } | |
| })(); |
