Automatically apply an HDR-like effect to all images on a webpage
目前為
// ==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));
}
});
})();