☰

Auto HDR

Automatically apply an HDR-like effect to all images on a webpage with adjustable settings

当前为 2024-08-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Auto HDR
// @namespace    http://taeparlaytampermonkey.net/
// @version      11
// @description  Automatically apply an HDR-like effect to all images on a webpage with 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');
                }
            }
        });
    }
 
    // Check if the current site is excluded
    function isSiteExcluded() {
        return settings.excludedSites.some(site => window.location.href.includes(site));
    }
 
    // Run the functions on page load
    window.addEventListener('load', () => {
        loadSettings();
        if (!isSiteExcluded()) {
            toggleHDREffect();
        }
    });
})();