☰

Auto HDR

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

目前為 2024-07-19 提交的版本，檢視 最新版本。

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

(function() {
    'use strict';

    // 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 => {
            if (!img.dataset.hdrApplied) {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');

                // Wait for image to load fully
                img.onload = () => {
                    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;

                    // Apply a simple HDR-like effect
                    let factor = 1.4; // 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 + 1] = clamp(data[i + 1] * 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));
        }
    });
})();