☰

Auto HDR

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

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

  1. // ==UserScript==
  2. // @name         Auto HDR
  3. // @namespace    http://taeparlaytampermonkey.net/
  4. // @version      11
  5. // @description  Automatically apply an HDR-like effect to all images on a webpage with adjustable settings
  6. // @author       tae
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Default settings
  16.     let settings = {
  17.         hdrEnabled: true,
  18.         factor: 1.2, // Adjusted factor to prevent over-brightening
  19.         excludedSites: []
  20.     };
  21.  
  22.     // Load settings from local storage
  23.     function loadSettings() {
  24.         const savedSettings = localStorage.getItem('autoHDRSettings');
  25.         if (savedSettings) {
  26.             settings = JSON.parse(savedSettings);
  27.         }
  28.     }
  29.  
  30.     // Save settings to local storage
  31.     function saveSettings() {
  32.         localStorage.setItem('autoHDRSettings', JSON.stringify(settings));
  33.     }
  34.  
  35.     // Apply HDR-like effect to each image
  36.     function applyHDREffect(img) {
  37.         const canvas = document.createElement('canvas');
  38.         const context = canvas.getContext('2d');
  39.  
  40.         canvas.width = img.width;
  41.         canvas.height = img.height;
  42.         context.drawImage(img, 0, 0, img.width, img.height);
  43.  
  44.         let imageData = context.getImageData(0, 0, img.width, img.height);
  45.         let data = imageData.data;
  46.  
  47.         for (let i = 0; i < data.length; i += 4) {
  48.             data[i] = clamp(data[i] * settings.factor);     // Red
  49.             data[i + 1] = clamp(data[i + 1] * settings.factor); // Green
  50.             data[i + 2] = clamp(data[i + 2] * settings.factor); // Blue
  51.         }
  52.  
  53.         context.putImageData(imageData, 0, 0);
  54.         img.src = canvas.toDataURL();
  55.         img.dataset.hdrApplied = true; // Mark as HDR applied
  56.     }
  57.  
  58.     // Helper function to clamp values between 0 and 255
  59.     function clamp(value) {
  60.         return Math.max(0, Math.min(255, value));
  61.     }
  62.  
  63.     // Apply or remove HDR effect based on settings
  64.     function toggleHDREffect() {
  65.         const images = document.querySelectorAll('img');
  66.         images.forEach(img => {
  67.             if (settings.hdrEnabled) {
  68.                 if (!img.dataset.hdrApplied) {
  69.                     applyHDREffect(img);
  70.                 }
  71.             } else {
  72.                 if (img.dataset.hdrApplied) {
  73.                     img.src = img.src; // Reset image source to remove HDR effect
  74.                     img.removeAttribute('data-hdrApplied');
  75.                 }
  76.             }
  77.         });
  78.     }
  79.  
  80.     // Check if the current site is excluded
  81.     function isSiteExcluded() {
  82.         return settings.excludedSites.some(site => window.location.href.includes(site));
  83.     }
  84.  
  85.     // Run the functions on page load
  86.     window.addEventListener('load', () => {
  87.         loadSettings();
  88.         if (!isSiteExcluded()) {
  89.             toggleHDREffect();
  90.         }
  91.     });
  92. })();