Automatically apply an HDR-like effect to all images on a webpage with a toggle button and adjustable settings
目前為
// ==UserScript==
// @name Auto HDR
// @namespace http://taeparlaytampermonkey.net/
// @version 0.7
// @description Automatically apply an HDR-like effect to all images on a webpage with a toggle button and adjustable settings
// @author tae
// @license MIT
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Default settings
let settings = {
hdrEnabled: true,
factor: 1.2, // Adjusted factor to prevent over-brightening
excludedSites: []
};
// Load settings from local storage
function loadSettings() {
const savedSettings = localStorage.getItem('autoHDRSettings');
if (savedSettings) {
settings = JSON.parse(savedSettings);
}
}
// Save settings to local storage
function saveSettings() {
localStorage.setItem('autoHDRSettings', JSON.stringify(settings));
}
// Apply HDR-like effect to each image
function applyHDREffect(img) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
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;
for (let i = 0; i < data.length; i += 4) {
data[i] = clamp(data[i] * settings.factor); // Red
data[i + 1] = clamp(data[i + 1] * settings.factor); // Green
data[i + 2] = clamp(data[i + 2] * settings.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));
}
// Apply or remove HDR effect based on settings
function toggleHDREffect() {
const images = document.querySelectorAll('img');
images.forEach(img => {
if (settings.hdrEnabled) {
if (!img.dataset.hdrApplied) {
applyHDREffect(img);
}
} else {
if (img.dataset.hdrApplied) {
img.src = img.src; // Reset image source to remove HDR effect
img.removeAttribute('data-hdrApplied');
}
}
});
}
// Create toggle button
function createToggleButton() {
const button = document.createElement('button');
button.textContent = settings.hdrEnabled ? 'Disable HDR' : 'Enable HDR';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '10001';
button.addEventListener('click', () => {
settings.hdrEnabled = !settings.hdrEnabled;
button.textContent = settings.hdrEnabled ? 'Disable HDR' : 'Enable HDR';
saveSettings();
location.reload(); // Reload the page to apply changes
});
document.body.appendChild(button);
}
// Create settings menu
function createSettingsMenu() {
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.top = '50px';
menu.style.right = '10px';
menu.style.backgroundColor = 'white';
menu.style.border = '1px solid black';
menu.style.padding = '10px';
menu.style.zIndex = '10000';
menu.style.display = 'none'; // Hide menu by default
const settingsHTML = `
<label>HDR Factor: <input type="number" step="0.1" id="hdrFactor" value="${settings.factor}"></label><br>
<label>Exclude Site: <input type="text" id="excludeSite" placeholder="example.com"></label><br>
<button id="applySettings">Apply</button>
<button id="saveSettings">Save</button>
`;
menu.innerHTML = settingsHTML;
document.body.appendChild(menu);
document.getElementById('applySettings').addEventListener('click', () => {
settings.factor = parseFloat(document.getElementById('hdrFactor').value);
const excludeSite = document.getElementById('excludeSite').value;
if (excludeSite && !settings.excludedSites.includes(excludeSite)) {
settings.excludedSites.push(excludeSite);
}
saveSettings();
location.reload(); // Reload the page to apply changes
});
document.getElementById('saveSettings').addEventListener('click', () => {
saveSettings();
alert('Settings saved!');
location.reload(); // Reload the page
});
return menu;
}
// Create settings toggle button
function createSettingsToggleButton(menu) {
const button = document.createElement('button');
button.textContent = 'Settings';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '60px';
button.style.zIndex = '10001';
button.addEventListener('click', () => {
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});
document.body.appendChild(button);
}
// Check if the current site is excluded
function isSiteExcluded() {
return settings.excludedSites.some(site => window.location.href.includes(site));
}
// Keyboard shortcut to toggle HDR effect
function addKeyboardShortcut() {
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'h') { // Ctrl + H to toggle HDR
settings.hdrEnabled = !settings.hdrEnabled;
saveSettings();
location.reload(); // Reload the page to apply changes
}
});
}
// Run the functions on page load
window.addEventListener('load', () => {
loadSettings();
if (!isSiteExcluded()) {
toggleHDREffect();
}
const menu = createSettingsMenu();
createToggleButton();
createSettingsToggleButton(menu);
addKeyboardShortcut();
});
})();