Greasy Fork is available in English.

Auto HDR with Resolution Toggle

Automatically apply an HDR-like effect to all images on a webpage with a toggleable resolution setting.

// ==UserScript==
// @name         Auto HDR with Resolution Toggle
// @namespace    http://taeparlaytampermonkey.net/
// @version      0.4
// @description  Automatically apply an HDR-like effect to all images on a webpage with a toggleable resolution setting.
// @author       Tae Parlay
// @match        http*://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Configuration
    let desiredWidth = 1920; // Default width for the images
    let desiredHeight = 1080; // Default height for the images
    let toggle = false; // Toggle state

    // Clamp function to keep values within the 0-255 range
    function clamp(value) {
        return Math.min(255, Math.max(0, value));
    }

    // Toggle resolution function
    function toggleResolution() {
        toggle = !toggle;
        if (toggle) {
            desiredWidth /= 2;
            desiredHeight /= 2;
        } else {
            desiredWidth *= 2;
            desiredHeight *= 2;
        }
    }

    // Event listener for the 'Enter' key to toggle resolution
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            toggleResolution();
        }
    });

    // Wait for the page to load
    window.addEventListener('load', () => {
        // Select all images on the page
        const images = document.querySelectorAll('img');

        // Apply HDR-like effect to each image
        images.forEach(img => {
            // Skip images that already have the effect applied
            if (img.dataset.hdrApplied) return;

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');

            // Wait for image to load fully
            img.onload = () => {
                // Set canvas to desired resolution
                canvas.width = desiredWidth;
                canvas.height = desiredHeight;
                context.drawImage(img, 0, 0, desiredWidth, desiredHeight);

                let imageData = context.getImageData(0, 0, desiredWidth, desiredHeight);
                let data = imageData.data;

                // Apply a simple HDR-like effect
                let factor = 1.5; // Adjust this factor to increase/decrease HDR effect
                for (let i = 0; i < data.length; i += 4) {
                    data[i] = clamp(data[i] * factor);     // Red
                    data[i + 1] = clamp(data[i + 1] * factor); // Green
                    data[i + 2] = clamp(data[i + 2] * factor); // Blue
                }

                context.putImageData(imageData, 0, 0);
                img.src = canvas.toDataURL();
                img.dataset.hdrApplied = true;
            };

            // Trigger the load event in case the image is already loaded
            if (img.complete) {
                img.onload();
            }
        });
    });
})();