video 요소의 스크린 샷을 찍는 북마크릿

개요

YouTube 또는 Nico Nico 동영상의 한 장면을 이미지로 저장하고 싶을 때 어떻게합니까?
OS의 스크린 샷 기능? 하지만 괜찮습니다만, 대개 구형 선택할 필요가 있기 때문에 번거롭고, 예쁘게 선택할 수 없으면 싫지요? 나는 싫다.

그래서 엔지니어처럼 video 요소에 대해 살펴보면 (대부분의 동영상은 video 요소로 구현되어 있기 때문에) Canvas의 drawImage 함수에 그대로 전달하여 그릴 수 있다는 것을 알았습니다.
즉 가상 Canvas에 video 요소를 그려 스크립트 다운로드하는 북마크릿을 만들면 원터치로 동영상의 스크린샷을 촬영할 수 있을 것 같습니다.

코드

라는 이유로 만든 것이 이쪽이 됩니다.

javascript: (() => { const video = document.querySelector('video'); if (video) { const canvas = document.createElement('canvas'); canvas.width = video.clientWidth; canvas.height = video.clientHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); const image = new Image(); image.src = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.download = `${location.host}_${new Date().toISOString()}.png`; a.target = '_blank'; a.href = image.src; a.click(); } else { alert('There is no video tag.'); } })(); void 0;

설명은 할애…북마크의 URL 란에 복사하면 OK입니다.
시사는 여기 에서 실시했습니다. 나쇼지오 좋네요.

주의점

Chrome에서만 작동해야합니다

Chrome은 두 번째 촬영 중에 여러 다운로드를 허용하라는 팝업을 표시합니다.

video 요소가 없으면 경고를 표시합니다

video 요소가 가득 차면 첫 번째 요소 만 찍습니다.

CORS 유래의 에러로 동작하지 않는 경우가 있다

동작 확인 서비스

✅ 니코니코 동영상(HTML5판만)
✅ 니코니코 생방송(HTML5판만)
✅ Twitch
✅ YouTube
❌ Vimeo

한 사람

360° 카메라의 동영상을 촬영하면 이렇게 되었습니다.