☰

Auto HDR

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

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

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