Greasy Fork is available in English.

Auto HDR with Resolution Setting

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

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

(function() {
    'use strict';

    // Configuration
    const desiredWidth = 1920; // Set your desired width for the images
    const desiredHeight = 1080; // Set your desired height for the images

    // 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();
            }
        });
    });

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