bilibili截图油猴脚本

bilibili_caputure.js

// ==UserScript==
// @name         B站视频截图
// @namespace    http://tampermonkey.net/
// @version      0.1.7
// @description  视频一键截图
// @author       Bleu_Bleine
// @match        https://www.bilibili.com/*
// @match        https://live.bilibili.com/*
// @grant        none
// @require      https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js
// @run-at       document-start
// ==/UserScript==
(function() {
    'use strict';

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.append(`
    Element.prototype._attachShadow = Element.prototype.attachShadow;
    Element.prototype.attachShadow = function() {
        return this._attachShadow({mode: 'open'});
    } `);
    (document.head || document.documentElement).appendChild(script);

    var timeFormat = function(currentTime) {
        currentTime = parseInt(currentTime);
        var timeStr = '00_00';
        if(currentTime > 0) {
            var sec = currentTime % 60 <= 9 ? '0'+currentTime % 60 : currentTime % 60;
            var min = Math.floor(currentTime / 60) <= 9 ? '0'+Math.floor(currentTime / 60) : Math.floor(currentTime / 60);
            timeStr = min+'_'+sec;
        }
        return timeStr;
    }

    var onVideoCut = function() {
        var video = $('video').length ? $('video')[0] : $('bwp-video')[0];
        if(!video){
            var iframe = document.getElementsByTagName('iframe')[0];
            video = iframe.contentWindow.document.getElementsByTagName('video')[0];
        }
        if(!video) return;
        var canvas = document.createElement('canvas');
        if($('#videoCut').length > 0){
            canvas = document.getElementById('videoCut');
        } else{
            canvas.setAttribute('id','videoCut');
            $('body').append(canvas);
        }
        canvas.setAttribute('width',video.videoWidth);
        canvas.setAttribute('height',video.videoHeight);
        canvas.style.display = 'none';
        var base64;
        if(video.shadowRoot) { //兼容 Microsoft Edge
            base64 = $(video.shadowRoot.lastChild).find('canvas')[0].toDataURL('images/png');
        }else {
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video,0,0,video.videoWidth,video.videoHeight);
            base64 = canvas.toDataURL('images/png');
        }
        var videoTime = timeFormat(video.currentTime);
        downloadImg(base64,videoTime)
    }

    function downloadImg(imgUrl,videoTime) {
        var eleLink = document.createElement('a');
        eleLink.download = $('#viewbox_report > h1.video-title,.live-skin-main-text,.media-wrapper > h1').attr('title')+'_'+videoTime;
        eleLink.href = imgUrl;
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
    }

    $(function(){
        var styleEl = document.createElement('style');
        document.head.appendChild(styleEl);
        var styleSheet = styleEl.sheet;
        styleSheet.insertRule('.progress-shadow-show .bilibili-player-video-wrap .top-wrap-cut {visibility: hidden;opacity: 0;}',0);
        styleSheet.insertRule('.video-control-show .bilibili-player-video-wrap .top-wrap-cut {visibility: visible;opacity: 1;}',0);

        var url = window.location.href;
        if(url.indexOf('live.bilibili.com') !== -1) {
            $('#head-info-vm').prepend(`<button id='videoCutBtn' title="按S键快速截图" style='position: absolute;right: 240px;bottom: 54px;z-index: 1;width: 80px;color: #fff;border: none;background-color: #ff85ad;line-height: 24px;border-radius: 4px;'>一键截图</button>`);
        }else if(url.indexOf('bangumi') !== -1) {
            setTimeout(function() {
                $('.bpx-player-top-title').after(`<div id='videoCutBtn' title="按S键快速截图" class="top-wrap-cut" style='pointer-events: all;cursor: pointer; margin: 18px 12px 0;;width: 72px;color: #fff;background-color: rgba(0,0,0,.4);line-height: 24px;border-radius: 12px;text-align: center;opacity: 1;-webkit-transition: opacity .2s ease-in-out;transition: opacity .2s ease-in-out;'>截图</div>`);
            },1000);
        }else {
            $('#bilibili-player').prepend(`<button id='videoCutBtn' title="按S键快速截图" style='position: relative;float: right;margin-top: -30px;width: 80px;color: #fff;border: none;background-color: #ff85ad;line-height: 24px;border-radius: 4px;'>一键截图</button>`);
        }
        $('body').on('click','#videoCutBtn',function() {onVideoCut();});
        window.addEventListener('keydown', (e) => {
            if(e.code == 'KeyS' && $(':focus').length == 0) onVideoCut();
        })
    });
})();