☰

bilibili-screenshot

快速获取Bilibili当前视频的截图并复制到剪贴板

// ==UserScript==
// @name        bilibili-screenshot
// @description 快速获取Bilibili当前视频的截图并复制到剪贴板
// @namespace   github.com/frostime
// @match       *://www.bilibili.com/video/*
// @icon        https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @version     0.2.3
// @author      frostime
// @license     MIT
// @grant       none
// ==/UserScript==
(function () {
    'use strict';

    // 创建按钮组容器
    const createButtonGroup = () => {
        const container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.bottom = '20px';
        container.style.right = '20px';
        container.style.zIndex = '9999';
        // 创建按钮容器
        const buttonContainer = document.createElement('div');
        buttonContainer.style.display = 'flex';
        buttonContainer.style.flexDirection = 'column';
        buttonContainer.style.gap = '10px';
        buttonContainer.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
        buttonContainer.style.transformOrigin = 'bottom right';
        buttonContainer.style.opacity = '0';
        buttonContainer.style.transform = 'scale(0.8) translateY(-10px)';
        buttonContainer.style.pointerEvents = 'none'; // 初始状态不可点击
        buttonContainer.style.position = 'absolute';
        buttonContainer.style.bottom = '50px'; // 在折叠按钮上方留出空间
        buttonContainer.style.right = '0';
        buttonContainer.style.width = '120px'; // 设置固定宽度
        // 创建折叠/展开按钮
        const toggleButton = document.createElement('button');
        toggleButton.innerHTML = '⚙️'; // 使用齿轮图标
        toggleButton.style.width = '40px';
        toggleButton.style.height = '40px';
        toggleButton.style.borderRadius = '50%';
        toggleButton.style.backgroundColor = '#00A1D6';
        toggleButton.style.color = '#fff';
        toggleButton.style.border = 'none';
        toggleButton.style.cursor = 'pointer';
        toggleButton.style.fontSize = '20px';
        toggleButton.style.position = 'absolute';
        toggleButton.style.bottom = '0';
        toggleButton.style.right = '0';
        toggleButton.style.transition = 'transform 0.3s ease';
        toggleButton.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
        let isExpanded = false;
        toggleButton.addEventListener('click', () => {
            isExpanded = !isExpanded;
            if (isExpanded) {
                buttonContainer.style.opacity = '1';
                buttonContainer.style.transform = 'scale(1) translateY(0)';
                buttonContainer.style.pointerEvents = 'auto';
                toggleButton.style.transform = 'rotate(180deg)';
            }
            else {
                buttonContainer.style.opacity = '0';
                buttonContainer.style.transform = 'scale(0.8) translateY(-10px)';
                buttonContainer.style.pointerEvents = 'none';
                toggleButton.style.transform = 'rotate(0deg)';
            }
        });
        container.appendChild(buttonContainer);
        container.appendChild(toggleButton);
        return {
            container,
            buttonContainer
        };
    };
    // 创建单个按钮
    const createButton = (config) => {
        const button = document.createElement('button');
        button.innerText = config.text;
        button.style.padding = '8px 12px';
        button.style.backgroundColor = config.backgroundColor || '#00A1D6';
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';
        button.style.fontSize = '12px';
        button.style.width = '100%'; // 让按钮填满容器宽度
        button.style.whiteSpace = 'nowrap'; // 防止文字换行
        button.style.textAlign = 'center'; // 文字居中
        button.addEventListener('click', config.onClick);
        return button;
    };
    // 复制视频截图
    const copyScreenshot = async () => {
        const video = document.querySelector('video');
        if (!video) {
            showMessage('无法找到视频元素');
            return;
        }
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const context = canvas.getContext('2d');
        if (context) {
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            canvas.toBlob(async (blob) => {
                if (blob) {
                    try {
                        await navigator.clipboard.write([
                            new ClipboardItem({
                                'image/png': blob
                            })
                        ]);
                        showMessage('截图已复制到剪贴板！');
                    }
                    catch (err) {
                        console.error('复制截图失败: ', err);
                        showMessage('复制截图失败，请检查浏览器支持的权限。');
                    }
                }
            }, 'image/png');
        }
    };
    // 复制分享链接
    const copyShareLink = async (timestamp = true) => {
        // 1. 获取当前 URL
        const currentUrl = new URL(window.location.href);
        const baseUrl = currentUrl.origin + currentUrl.pathname;
        // h1.video-title 
        let title = document.querySelector('h1.video-title')?.textContent;
        // 替换 title 内部的 [ ] 符号，防止 markdown 格式化错误，替换为 【 】
        title = title?.replace(/\[([^\]]+)\]/g, '【$1】');
        const copyLink = (text) => {
            navigator.clipboard.writeText(text);
            showMessage('复制分享链接');
        };
        if (timestamp === false) {
            const text = `[${title}](${baseUrl})`;
            copyLink(text);
            return;
        }
        // 获取视频时间戳 div.bpx-player-ctrl-time-label span.bpx-player-ctrl-time-current
        const current = document.querySelector('div.bpx-player-ctrl-time-label span.bpx-player-ctrl-time-current')?.textContent;
        if (!current) {
            showMessage('无法找到视频时间戳');
            return;
        }
        const parts = current.split(':');
        let time = 0;
        if (parts.length === 3) {
            time = parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
        }
        else {
            time = parseInt(parts[0]) * 60 + parseInt(parts[1]);
        }
        const text = `[空降到 ${current}](${baseUrl}?t=${time})`;
        copyLink(text);
    };
    // 消息框显示功能
    const showMessage = (message) => {
        const messageBox = document.createElement('div');
        messageBox.innerText = message;
        messageBox.style.position = 'fixed';
        messageBox.style.bottom = '70px';
        messageBox.style.right = '20px';
        messageBox.style.zIndex = '9999';
        messageBox.style.padding = '10px 20px';
        messageBox.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        messageBox.style.color = '#fff';
        messageBox.style.borderRadius = '5px';
        messageBox.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
        messageBox.style.fontSize = '14px';
        messageBox.style.transition = 'opacity 0.5s';
        messageBox.style.opacity = '1';
        document.body.appendChild(messageBox);
        setTimeout(() => {
            messageBox.style.opacity = '0';
            setTimeout(() => {
                messageBox.remove();
            }, 250);
        }, 1500);
    };
    // 初始化按钮组
    const { container, buttonContainer } = createButtonGroup();
    // 创建截图按钮
    const screenshotButton = createButton({
        text: '截图并复制',
        onClick: copyScreenshot
    });
    // 创建分享链接按钮
    const shareLinkButton = createButton({
        text: '视频分享链接',
        onClick: () => copyShareLink(false),
        backgroundColor: '#FF6699'
    });
    const preciseJumpButton = createButton({
        text: '精准空降链接',
        onClick: () => copyShareLink(true),
        backgroundColor: '#FF6699'
    });
    // 添加按钮到按钮容器
    buttonContainer.appendChild(screenshotButton);
    buttonContainer.appendChild(shareLinkButton);
    buttonContainer.appendChild(preciseJumpButton);
    // 将按钮组添加到页面
    document.body.appendChild(container);

})();
//# sourceMappingURL=bundle.user.js.map