Auto HDR Enhanced

Auto HDR

Automatically apply an HDR-like effect to all images on a webpage with a toggle button and adjustable settings
当前为 2024-08-11 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Auto HDR
// @namespace    http://taeparlaytampermonkey.net/
// @version      0.8
// @description  Automatically apply an HDR-like effect to all images on a webpage with a toggle button and adjustable settings
// @author       tae
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Default settings
    let settings = {
        hdrEnabled: true,
        factor: 1.2, // Adjusted factor to prevent over-brightening
        excludedSites: []
    };

    // Load settings from local storage
    function loadSettings() {
        const savedSettings = localStorage.getItem('autoHDRSettings');
        if (savedSettings) {
            settings = JSON.parse(savedSettings);
        }
    }

    // Save settings to local storage
    function saveSettings() {
        localStorage.setItem('autoHDRSettings', JSON.stringify(settings));
    }

    // Apply HDR-like effect to each image
    function applyHDREffect(img) {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);

        let imageData = context.getImageData(0, 0, img.width, img.height);
        let data = imageData.data;

        for (let i = 0; i < data.length; i += 4) {
            data[i] = clamp(data[i] * settings.factor);     // Red
            data[i + 1] = clamp(data[i + 1] * settings.factor); // Green
            data[i + 2] = clamp(data[i + 2] * settings.factor); // Blue
        }

        context.putImageData(imageData, 0, 0);
        img.src = canvas.toDataURL();
        img.dataset.hdrApplied = true; // Mark as HDR applied
    }

    // Helper function to clamp values between 0 and 255
    function clamp(value) {
        return Math.max(0, Math.min(255, value));
    }

    // Apply or remove HDR effect based on settings
    function toggleHDREffect() {
        const images = document.querySelectorAll('img');
        images.forEach(img => {
            if (settings.hdrEnabled) {
                if (!img.dataset.hdrApplied) {
                    applyHDREffect(img);
                }
            } else {
                if (img.dataset.hdrApplied) {
                    img.src = img.src; // Reset image source to remove HDR effect
                    img.removeAttribute('data-hdrApplied');
                }
            }
        });
    }

    // Create toggle button
    function createToggleButton() {
        const button = document.createElement('button');
        button.textContent = settings.hdrEnabled ? 'Disable HDR' : 'Enable HDR';
        button.style.position = 'fixed';
        button.style.top = '10px';
        button.style.left = '10px'; // Changed from right to left
        button.style.zIndex = '10001';

        button.addEventListener('click', () => {
            settings.hdrEnabled = !settings.hdrEnabled;
            button.textContent = settings.hdrEnabled ? 'Disable HDR' : 'Enable HDR';
            saveSettings();
            location.reload(); // Reload the page to apply changes
        });

        document.body.appendChild(button);
    }

    // Create settings menu
    function createSettingsMenu() {
        const menu = document.createElement('div');
        menu.style.position = 'fixed';
        menu.style.top = '50px';
        menu.style.right = '10px';
        menu.style.backgroundColor = 'white';
        menu.style.border = '1px solid black';
        menu.style.padding = '10px';
        menu.style.zIndex = '10000';
        menu.style.display = 'none'; // Hide menu by default

        const settingsHTML = `
            <label>HDR Factor: <input type="number" step="0.1" id="hdrFactor" value="${settings.factor}"></label><br>
            <label>Exclude Site: <input type="text" id="excludeSite" placeholder="example.com"></label><br>
            <button id="applySettings">Apply</button>
            <button id="saveSettings">Save</button>
        `;

        menu.innerHTML = settingsHTML;
        document.body.appendChild(menu);

        document.getElementById('applySettings').addEventListener('click', () => {
            settings.factor = parseFloat(document.getElementById('hdrFactor').value);
            const excludeSite = document.getElementById('excludeSite').value;
            if (excludeSite && !settings.excludedSites.includes(excludeSite)) {
                settings.excludedSites.push(excludeSite);
            }
            saveSettings();
            location.reload(); // Reload the page to apply changes
        });

        document.getElementById('saveSettings').addEventListener('click', () => {
            saveSettings();
            alert('Settings saved!');
            location.reload(); // Reload the page
        });

        return menu;
    }

    // Create settings toggle button
    function createSettingsToggleButton(menu) {
        const button = document.createElement('button');
        button.textContent = 'Settings';
        button.style.position = 'fixed';
        button.style.top = '10px';
        button.style.right = '60px';
        button.style.zIndex = '10001';

        button.addEventListener('click', () => {
            menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
        });

        document.body.appendChild(button);
    }

    // Check if the current site is excluded
    function isSiteExcluded() {
        return settings.excludedSites.some(site => window.location.href.includes(site));
    }

    // Keyboard shortcut to toggle HDR effect
    function addKeyboardShortcut() {
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'h') { // Ctrl + H to toggle HDR
                settings.hdrEnabled = !settings.hdrEnabled;
                saveSettings();
                location.reload(); // Reload the page to apply changes
            }
        });
    }

    // Run the functions on page load
    window.addEventListener('load', () => {
        loadSettings();
        if (!isSiteExcluded()) {
            toggleHDREffect();
        }
        const menu = createSettingsMenu();
        createToggleButton();
        createSettingsToggleButton(menu);
        addKeyboardShortcut();
    });
})();
欢迎访问Greasy Fork镜像
