bangumi image preview

Preview image when hover-over, generated by chatgpt by asking
换行
// ==UserScript==
// @name         bangumi image preview
// @namespace    https://example.com
// @version      0.1
// @description  Preview image when hover-over, generated by chatgpt by asking
// @match        https://bgm.tv/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to convert image URLs
    function convertImageURL(url) {
        //const regex = /pic\/(crt|cover)\/(.*?)\?/;
        const regex = '\/\/lain\.bgm\.tv\/pic\/(.*)\/[a-z]\/(.*)';
        const match = url.match(regex);
        console.log(`original url ${url}`)
        if (match) {
            console.log('matched');
            const type = match[1];
            const path = match[2];
            console.log(match[0])
            console.log(`type: ${match[1]}`)
            console.log(`path: ${match[2]}`)
            //const encodedPath = encodeURIComponent(path);
            const convertedURL = "//lain.bgm.tv/" + url.replace(match[0], `pic/${type}/l/${path}`);
            console.log(convertedURL)
            return convertedURL;
        }
        console.log('not matched')
        return url;
    }


    // Function to handle hover-over and rendering
    function handleHover(element) {
        const originalURL = element.getAttribute('src');
        const convertedURL = convertImageURL(originalURL);

        // Create a div to display the converted image
        const hoverDiv = document.createElement('div');
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.bottom = '10px';
        hoverDiv.style.left = '10px';
        hoverDiv.style.backgroundColor = 'white';
        hoverDiv.style.padding = '10px';
        hoverDiv.style.border = '1px solid black';

        // Create an image element
        const image = document.createElement('img');
        image.style.maxWidth = '400px'; // Adjust the maximum width as needed
        image.style.maxHeight = '400px'; // Adjust the maximum height as needed
        image.setAttribute('src', convertedURL);

        // Append the image element to the div
        hoverDiv.appendChild(image);

        // Append the div to the body
        document.body.appendChild(hoverDiv);

        // Remove the div when the mouse leaves the image
        element.addEventListener('mouseleave', () => {
            hoverDiv.remove();
        });
    }

    // Get all image elements on the page
    const images = document.querySelectorAll('img');

    // Add hover-over event listener to each image
    images.forEach((image) => {
        console.log(image)
        image.addEventListener('mouseover', () => {
            handleHover(image);
        });
    });
})();
欢迎访问Greasy Fork镜像
