☰

Auto HDR

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

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

  1. // ==UserScript==
  2. // @name         Auto HDR
  3. // @namespace    http://taeparlaytampermonkey.net/
  4. // @version      0.3
  5. // @description  Automatically apply an HDR-like effect to all images on a webpage
  6. // @author       tae
  7. // @license      MIT
  8. // @match        http*://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Wait for the page to load
  16.     window.addEventListener('load', () => {
  17.         // Select all images on the page
  18.         const images = document.querySelectorAll('img');
  19.  
  20.         // Apply HDR-like effect to each image
  21.         images.forEach(img => {
  22.             if (!img.dataset.hdrApplied) {
  23.                 const canvas = document.createElement('canvas');
  24.                 const context = canvas.getContext('2d');
  25.  
  26.                 // Wait for image to load fully
  27.                 img.onload = () => {
  28.                     canvas.width = img.width;
  29.                     canvas.height = img.height;
  30.                     context.drawImage(img, 0, 0, img.width, img.height);
  31.  
  32.                     let imageData = context.getImageData(0, 0, img.width, img.height);
  33.                     let data = imageData.data;
  34.  
  35.                     // Apply a simple HDR-like effect
  36.                     let factor = 1.4; // Adjust this factor to increase/decrease HDR effect
  37.                     for (let i = 0; i < data.length; i += 4) {
  38.                         data[i] = clamp(data[i] * factor);     // Red
  39.                         data[i + 1] = clamp(data[i + 1] * factor); // Green
  40.                         data[i + 1] = clamp(data[i + 1] * factor); // Blue
  41.                     }
  42.  
  43.                     context.putImageData(imageData, 0, 0);
  44.                     img.src = canvas.toDataURL();
  45.                     img.dataset.hdrApplied = true; // Mark as HDR applied
  46.                 };
  47.             }
  48.         });
  49.  
  50.         // Helper function to clamp values between 0 and 255
  51.         function clamp(value) {
  52.             return Math.max(0, Math.min(255, value));
  53.         }
  54.     });
  55. })();