原生图片浏览器

最优雅的图片打开方式
当前为 2024-08-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         原生图片浏览器
// @version      2.2
// @description  最优雅的图片打开方式
// @author       hiisme
// @match       https://image.baidu.com/*
// @match       https://unsplash.com/*
// @match       https://www.google.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_notification
// @namespace https://gf.qytechs.cn/users/217852
// ==/UserScript==

(async function() {
    'use strict';

    let enableImageClick = await GM_getValue('enableImageClick', true);
    let shortcut = await GM_getValue('shortcut', 'Ctrl+Shift+I');
    let windowWidth = await GM_getValue('windowWidth', screen.width);
    let windowHeight = await GM_getValue('windowHeight', screen.height);

    async function toggleImageClick() {
        enableImageClick = !enableImageClick;
        await GM_setValue('enableImageClick', enableImageClick);
        GM_notification({
            text: `Image click-to-open feature is now ${enableImageClick ? 'enabled' : 'disabled'}.`,
            title: 'Image Viewer',
            timeout: 3000
        });
    }

    async function setShortcut() {
        const newShortcut = prompt('Enter new shortcut (e.g., Ctrl+Shift+I):', shortcut);
        if (newShortcut) {
            shortcut = newShortcut;
            await GM_setValue('shortcut', shortcut);
            GM_notification({
                text: `Shortcut set to: ${shortcut}`,
                title: 'Image Viewer',
                timeout: 3000
            });
        }
    }

    async function setWindowSize() {
        const newWidth = prompt('Enter new window width (pixels):', windowWidth);
        const newHeight = prompt('Enter new window height (pixels):', windowHeight);
        if (newWidth && newHeight) {
            windowWidth = parseInt(newWidth, 10);
            windowHeight = parseInt(newHeight, 10);
            await GM_setValue('windowWidth', windowWidth);
            await GM_setValue('windowHeight', windowHeight);
            GM_notification({
                text: `Window size set to: ${windowWidth}x${windowHeight}`,
                title: 'Image Viewer',
                timeout: 3000
            });
        }
    }

    GM_registerMenuCommand("Toggle Image Click-to-Open", toggleImageClick);
    GM_registerMenuCommand("Set Shortcut", setShortcut);
    GM_registerMenuCommand("Set Window Size", setWindowSize);

    function parseShortcut(shortcut, event) {
        const keys = shortcut.toLowerCase().split('+').map(k => k.trim());
        return keys.includes(event.key.toLowerCase()) &&
               (keys.includes('ctrl') === event.ctrlKey) &&
               (keys.includes('shift') === event.shiftKey) &&
               (keys.includes('alt') === event.altKey) &&
               (keys.includes('meta') || keys.includes('cmd') || keys.includes('command') === event.metaKey);
    }

    function onKeyDown(event) {
        if (parseShortcut(shortcut, event)) {
            event.preventDefault();
            toggleImageClick();
        }
    }
    document.addEventListener('keydown', onKeyDown);

    function createImageViewer(url) {
        const topOffset = screen.height * 0.05;
        const leftOffset = (screen.width - windowWidth) / 2;
        const topPosition = (screen.height - windowHeight) / 2 - topOffset;

        const newWindow = window.open('', '_blank', `width=${windowWidth},height=${windowHeight},top=${topPosition},left=${leftOffset},resizable=yes,scrollbars=no`);

        if (newWindow) {
            // Set a minimal HTML structure with inline styles to prevent flicker
            newWindow.document.open();
            newWindow.document.write(`
                <html>
                <head>
                    <style>
                        body {
                            margin: 0;
                            overflow: hidden;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: black;
                        }
                        img {
                            max-width: 100vw;
                            max-height: 100vh;
                            cursor: grab;
                            transition: transform 0.1s ease;
                            position: absolute;
                            user-drag: none;
                            -webkit-user-drag: none;
                        }
                    </style>
                    <meta name="theme-color" content="#000000">
                </head>
                <body>
                    <img src="${url}" alt="Image" />
                </body>
                </html>
            `);
            newWindow.document.close();

            let scale = 1;
            let imgX = 0, imgY = 0;
            let isDragging = false;
            let lastMouseX = 0, lastMouseY = 0;

            function onMouseMove(event) {
                if (isDragging) {
                    const deltaX = event.clientX - lastMouseX;
                    const deltaY = event.clientY - lastMouseY;
                    imgX += deltaX;
                    imgY += deltaY;
                    newWindow.document.querySelector('img').style.transform = `translate(${imgX}px, ${imgY}px) scale(${scale})`;
                    lastMouseX = event.clientX;
                    lastMouseY = event.clientY;
                }
            }

            function onMouseUp() {
                isDragging = false;
                newWindow.document.querySelector('img').style.cursor = 'grab';
                newWindow.removeEventListener('mousemove', onMouseMove);
                newWindow.removeEventListener('mouseup', onMouseUp);
            }

            function onWheelHandler(event) {
                event.preventDefault();
                const scaleAmount = event.deltaY > 0 ? 0.9 : 1.1;
                scale *= scaleAmount;
                newWindow.document.querySelector('img').style.transform = `translate(${imgX}px, ${imgY}px) scale(${scale})`;
            }

            function onMouseDownHandler(event) {
                event.preventDefault();
                isDragging = true;
                newWindow.document.querySelector('img').style.cursor = 'grabbing';
                lastMouseX = event.clientX;
                lastMouseY = event.clientY;
                newWindow.addEventListener('mousemove', onMouseMove);
                newWindow.addEventListener('mouseup', onMouseUp);
            }

            function onDoubleClickHandler() {
                newWindow.close();
            }

            newWindow.document.body.addEventListener('wheel', onWheelHandler, { passive: false });
            newWindow.document.body.addEventListener('mousedown', onMouseDownHandler);
            newWindow.document.body.addEventListener('dblclick', onDoubleClickHandler);

            newWindow.addEventListener('beforeunload', () => {
                newWindow.document.body.removeEventListener('wheel', onWheelHandler);
                newWindow.document.body.removeEventListener('mousedown', onMouseDownHandler);
                newWindow.document.body.removeEventListener('dblclick', onDoubleClickHandler);
                newWindow.removeEventListener('mousemove', onMouseMove);
                newWindow.removeEventListener('mouseup', onMouseUp);
            });
        }
    }

    async function onClick(event) {
        const target = event.target;

        if (target.tagName === 'A' && /\.(jpg|jpeg|png|gif|webp)$/i.test(target.href)) {
            event.preventDefault();
            event.stopPropagation(); // Prevent default behavior and stop further event propagation
            createImageViewer(target.href);
        } else if (enableImageClick && target.tagName === 'IMG' && /\.(jpg|jpeg|png|gif|webp)$/i.test(target.src)) {
            event.preventDefault();
            event.stopPropagation(); // Prevent default behavior and stop further event propagation
            createImageViewer(target.src);
        } else if (enableImageClick && target.tagName === 'IMG' && target.src) {
            event.preventDefault();
            event.stopPropagation(); // Prevent default behavior and stop further event propagation
            createImageViewer(target.src);
        }
    }

    document.addEventListener('click', onClick, true);

    function cleanUp() {
        document.removeEventListener('keydown', onKeyDown);
        document.removeEventListener('click', onClick, true);
    }

    window.addEventListener('unload', cleanUp);
})();
欢迎访问Greasy Fork镜像
