☰

Bilibili视频截图按钮

在投稿时间之后显示一个截屏按钮，点击后复制到粘贴板

当前为 2025-01-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Bilibili视频截图按钮
// @namespace    http://tampermonkey.net/
// @version      0.8.0.8
// @description  在投稿时间之后显示一个截屏按钮，点击后复制到粘贴板
// @author       0808
// @match        http*://www.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// @grant        GM_log
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_openInTab
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    function FindvideoEle(){
        function f (){
            let videos = document.getElementsByTagName('video');
            if(videos.length > 0){
                for(let i = 0; i < videos.length; i++){
                    addScreenShotEle(videos[i]);
                }
            }
        }
        setInterval(f, 3000);
    }

    function addScreenShotEle(vi){
        let SsIDname = vi.id + "_Sshot";
        if(document.getElementById(SsIDname) === null){
            let SsHtml = document.createElement("button");
            SsHtml.textContent = "截屏";
            SsHtml.style.backgroundColor = 'rgba(0,174,236, 0.5)';
            SsHtml.style.transition = 'background-color 0.3s';
            SsHtml.style.color = '#ffffff';
            SsHtml.style.fontSize = '15px';
            SsHtml.style.cursor = 'pointer';
            SsHtml.style.borderRadius = "10px";
            SsHtml.style.border = "0px solid #ffffff";
            SsHtml.style.paddingLeft = "10px";
            SsHtml.style.paddingRight = "10px";
            SsHtml.style.marginBottom = "2px";

            SsHtml.addEventListener("mouseover", function(event) {
                SsHtml.style.backgroundColor = 'rgba(0,174,236, 1)';
            });
            SsHtml.addEventListener("mouseout", function(event) {
                SsHtml.style.backgroundColor = 'rgba(0,174,236, 0.5)';
            });

            // 找到投稿时间的元素
            let pubDateElement = document.querySelector('.pubdate-ip');
            if (pubDateElement) {
                SsHtml.setAttribute("id", SsIDname);
                pubDateElement.insertAdjacentElement('afterend', SsHtml); // 在投稿时间元素后插入按钮
            }

            SsHtml.addEventListener("click", function(event){
                event.stopPropagation();
                var v = vi;
                var myCanvas = document.createElement('canvas');
                myCanvas.width = v.videoWidth;
                myCanvas.height = v.videoHeight;
                var ctx = myCanvas.getContext('2d');
                ctx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);
                myCanvas.toBlob(function(blob) {
                    navigator.clipboard.write([
                        new ClipboardItem({'image/png': blob})
                    ]).then(function() {
                        console.log('Image copied to clipboard');
                    }).catch(function(err) {
                        console.error('Failed to copy image to clipboard: ', err);
                    });
                });
            });
        } else {
            // Do nothing if the button already exists
        }
    }

    function check(element, idName) {
        while (element && element.id !== idName) {
            element = element.parentElement;
        }
        return element;
    }

    // Execute FindvideoEle immediately
    (function() { FindvideoEle(); })();

    // Your code here...
})();