Il filtro dei filtri: RandomPlus

Sfoglia nel tuo dispositivo e carica una foto per applicare il filtro RandomPlus. Questo filtro unico ti permette di trasformare le tue immagini con una serie di effetti cinematografici, tra cui:

  • Luminosità: Aumenta o riduci la luminosità per un effetto più brillante o più scuro.
  • Contrasto: Regola il contrasto per enfatizzare le differenze tra le aree chiare e scure.
  • Saturazione: Modifica la saturazione dei colori per un look più vivace o più tenue.
  • Tinta Rossa, Verde e Blu: Aggiungi toni colorati per dare un tocco artistico alla tua foto.
  • Vignettatura: Aggiungi un effetto di vignettatura per focalizzare l’attenzione al centro dell’immagine.

Una volta caricata l’immagine, potrai visualizzare il risultato direttamente nella pagina. Sotto l’immagine appariranno tre pulsanti:

  • Scarica: Scarica l’immagine modificata con il filtro RandomPlus applicato.
  • Randomizza Parametri: Genera una nuova configurazione casuale di tutti i parametri del filtro.
  • Reset: Ripristina i parametri predefiniti del filtro per una nuova applicazione.

Nota Bene: Nessuna immagine verrà caricata sui server. Tutto il processo di modifica avviene direttamente sul tuo dispositivo, garantendo così la massima privacy.

Buon divertimento con il filtro RandomPlus e lascia che la tua creatività esploda a caso!

 

Ps. La foto a corollario dell’articolo vuole essere un omaggio a Dolores O’ Riordan [The Cranberries] che con la sua fragile grandezza continua ad ispirare tantissimi artisti ❤

Filtro Cinematografico /* Stili globali */ body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background-color: #000; color: #000; margin: 0; padding: 20px; } h1 { font-size: 2em; margin-bottom: 20px; color: #000000; position: relative; } /* Contenitore del pulsante di upload */ .upload-container { display: flex; align-items: center; padding: 10px; border: 2px solid #bbbbbb; background-color: #000; color: #000; border-radius: 10px; box-shadow: 0 0 15px rgba(191, 191, 191, 0.8); position: relative; } input[type="file"] { background-color: #1f75fe; color: #fff; cursor: pointer; border: none; border-radius: 10px; padding: 12px 16px; font-weight: bold; z-index: 1; width: 300px; text-align: center; } input[type="file"]::file-selector-button:hover { background-color: #333; } .file-name { margin-left: 10px; flex: 1; word-break: break-word; } canvas { display: none; margin-top: 20px; border: 2px solid #bbbbbb; background-color: #111; box-shadow: 0 0 20px rgba(191, 191, 191, 0.8), 0 0 30px rgba(226, 226, 226, 0.6); max-width: 750px; border-radius: 10px; } #downloadButton, #randomButton, #resetButton { display: none; margin-top: 20px; padding: 12px 24px; border: 2px solid #bbbbbb; background-color: #555555; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; border-radius: 10px; font-weight: bold; position: relative; overflow: hidden; } #downloadButton:hover, #randomButton:hover, #resetButton:hover { background: #cccccc; } #downloadButton::after, #randomButton::after, #resetButton::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.5) 100%); background-size: 10px 10px; z-index: 0; transform: scale(0); transition: transform 0.3s ease-in-out; } #downloadButton:hover::after, #randomButton:hover::after, #resetButton:hover::after { transform: scale(1); } #downloadButton::before, #randomButton::before, #resetButton::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 50%, rgba(0, 0, 0, 0.2) 100%); z-index: 0; transition: opacity 0.3s ease-in-out; opacity: 0; } #downloadButton:hover::before, #randomButton:hover::before, #resetButton:hover::before { opacity: 1; } #parameters { margin-top: 20px; color: #000000; font-size: 1em; } #parameters input { width: 60px; margin-left: 10px; background-color: #333; border: 1px solid #bbbbbb; color: #fff; padding: 5px; border-radius: 5px; }

Applica il filtro RandomPlus

const uploadInput = document.getElementById('upload'); const canvas = document.getElementById('canvas'); const downloadButton = document.getElementById('downloadButton'); const randomButton = document.getElementById('randomButton'); const resetButton = document.getElementById('resetButton'); const parametersDiv = document.getElementById('parameters'); const ctx = canvas.getContext('2d'); const fileNameElement = document.querySelector('.file-name'); let filterConfig = { title: 'RandomPlus', brightness: 1.3, contrast: 1.5, vignetteStrength: 1.5, grain: 20, redTint: 20, greenTint: 20, blueTint: 20, hue: 0, saturation: 1, }; let originalImage = null; let originalImageData = null; let originalFileName = ''; document.querySelector('h1').textContent = `Il filtro dei filtri: ${filterConfig.title}`; document.querySelector('#downloadButton').textContent = `Scarica con filtro ${filterConfig.title}`; function applyFilter(data) { function adjustContrast(value, contrast) { return ((((value / 255) - 0.5) * contrast) + 0.5) * 255; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; let max = Math.max(r, g, b); let min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l]; } function hslToRgb(h, s, l) { let r, g, b; if (s === 0) { r = g = b = l; } else { function hueToRgb(p, q, t) { if (t 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } let q = l < 0.5 ? l * (1 + s) : l + s - l * s; let p = 2 * l - q; r = hueToRgb(p, q, h + 1/3); g = hueToRgb(p, q, h); b = hueToRgb(p, q, h - 1/3); } return [r * 255, g * 255, b * 255]; } for (let i = 0; i < data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; r *= filterConfig.brightness; g *= filterConfig.brightness; b *= filterConfig.brightness; r = adjustContrast(r, filterConfig.contrast); g = adjustContrast(g, filterConfig.contrast); r += filterConfig.redTint; g += filterConfig.greenTint; b += filterConfig.blueTint; const grain = (Math.random() - 0.5) * filterConfig.grain; r += grain; g += grain; b += grain; const cx = canvas.width / 2; const cy = canvas.height / 2; const dx = i / 4 % canvas.width - cx; const dy = Math.floor(i / 4 / canvas.width) - cy; const dist = Math.sqrt(dx * dx + dy * dy); const vignette = Math.max(0, 1 - (dist / Math.max(canvas.width, canvas.height)) * filterConfig.vignetteStrength); r *= vignette; g *= vignette; b *= vignette; let [h, s, l] = rgbToHsl(r, g, b); s *= filterConfig.saturation; l += filterConfig.hue / 100; if (filterConfig.saturation 750) { const ratio = 750 / width; width = 750; height *= ratio; } canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height); // Store original image applyFilterToCanvas(); canvas.style.display = 'block'; downloadButton.style.display = 'block'; randomButton.style.display = 'block'; resetButton.style.display = 'block'; displayParameters(); }; img.src = e.target.result; }; reader.readAsDataURL(file); fileNameElement.textContent = file.name; } function handleDownload() { const params = [ `b${filterConfig.brightness.toFixed(1)}`, `c${filterConfig.contrast.toFixed(1)}`, `s${filterConfig.saturation.toFixed(2)}`, `rt${filterConfig.redTint}`, `gt${filterConfig.greenTint}`, `bt${filterConfig.blueTint}`, `v${filterConfig.vignetteStrength.toFixed(1)}`, ].join('_'); const fileName = `${originalFileName.split('.').slice(0, -1).join('_')}_${filterConfig.title}_${params}.jpg`; const link = document.createElement('a'); link.download = fileName; link.href = canvas.toDataURL('image/jpeg'); link.click(); } function getRandomValue(min, max) { return (Math.random() * (max - min) + min).toFixed(2); } function randomizeParameters() { filterConfig = { title: 'RandomPlus', brightness: parseFloat(getRandomValue(0.5, 2)), contrast: parseFloat(getRandomValue(0.5, 2)), vignetteStrength: parseFloat(getRandomValue(0.5, 3)), grain: parseInt(getRandomValue(0, 0)), redTint: parseInt(getRandomValue(-50, 50)), greenTint: parseInt(getRandomValue(-50, 50)), blueTint: parseInt(getRandomValue(-50, 50)), hue: parseInt(getRandomValue(0, 0)), saturation: parseFloat(getRandomValue(0, 2)), }; applyFilterToCanvas(); displayParameters(); } function resetParameters() { filterConfig = { title: 'RandomPlus', brightness: 1.3, contrast: 1.5, vignetteStrength: 1.5, grain: 20, redTint: 20, greenTint: 20, blueTint: 20, hue: 0, saturation: 1, }; applyFilterToCanvas(); displayParameters(); } function applyFilterToCanvas() { if (!originalImage) return; const imageData = new ImageData(new Uint8ClampedArray(originalImage.data), originalImage.width, originalImage.height); const data = imageData.data; applyFilter(data); ctx.putImageData(imageData, 0, 0); } function displayParameters() { parametersDiv.innerHTML = `

Luminosità

Contrasto

Saturazione

Tinta Rosso

Tnta Verde

Tinta Blu

Vignettatura

`; parametersDiv.querySelectorAll('input').forEach(input => { input.addEventListener('change', handleParameterChange); input.addEventListener('keypress', handleEnterKey); }); } function handleParameterChange(event) { const param = event.target.getAttribute('data-param'); filterConfig[param] = parseFloat(event.target.value); applyFilterToCanvas(); } function handleEnterKey(event) { if (event.key === 'Enter') { handleParameterChange(event); } } uploadInput.addEventListener('change', handleFileSelect); downloadButton.addEventListener('click', handleDownload); randomButton.addEventListener('click', randomizeParameters); resetButton.addEventListener('click', resetParameters); // Aggiungi questo listener




Il favoloso filtro: Amelia

Un altro filtro dedicato al Cinema.
Il filtro è un omaggio questa volta ad un film “Amélie” (2001) di Jean-Pierre Jeunet. Racconta la storia di Amélie Poulain, una giovane donna che, cresciuta in isolamento dai genitori iperprotettivi, si trasferisce a Montmartre, Parigi. Scopre una scatola di ricordi nascosta nel suo appartamento e, dopo averla restituita al proprietario originale, decide di dedicare la sua vita a migliorare quella degli altri attraverso piccoli atti di gentilezza. Nel processo, Amélie trova l’amore e scopre se stessa. Interpretata da Audrey Tautou.
La pellicola è conosciuta per la sua visione poetica e magica della vita quotidiana.
“Il favoloso mondo di Amélie”, titolo in italiano del film che mi ha permesso di fare una circonlocuzione per il titolo dell’articolo per descrivere il filtro.
Il filtro utilizza una palette di colori caldi (rosso, verde, giallo) e filtri fotografici per creare un’atmosfera nostalgica e fiabesca. Le immagini sono saturate e contrastate in post-produzione, accentuando i toni vividi e intensi. L’illuminazione strategica e alcuni effetti digitali rafforzano l’aspetto magico del film, rendendo ogni scena simile a un dipinto.
Il filtro utilizzato in questa pagina è una combinazione di verdi e rossi, creando un look molto riconoscibile. Questo può essere ottenuto utilizzando filtri colore e regolando il bilanciamento del bianco.
Si utilizza il tasto “Sfoglia” per visualizzare l’immagine. Dopo aver visualizzato l’immagine sarà possibile scaricare la foto con il filtro applicato cliccando sul tasto “Scarica con filtro Amelia”

Buon viaggio in questo favoloso mondo!

Amélie Filter body { background-color: #fcebb6; color: #5b4636; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; overflow: auto; } h1 { font-size: 2.5em; margin-bottom: 20px; } input[type="file"] { padding: 10px; border: 2px solid #5b4636; background-color: #f7f0d4; color: #5b4636; font-size: 1em; cursor: pointer; } canvas { margin-top: 20px; border: 2px solid #5b4636; max-width: 100%; max-height: 80vh; } #downloadButton { margin-top: 20px; padding: 10px 20px; background-color: #5b4636; color: #f7f0d4; border: none; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; } #downloadButton:hover { background-color: #3e3126; }

Applica il filtro Amelia

document.getElementById('upload').addEventListener('change', function(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Calculate the max dimensions while maintaining aspect ratio const maxWidth = window.innerWidth * 0.8; const maxHeight = window.innerHeight * 0.8; let width = img.width; let height = img.height; if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // Apply "Amélie" filter const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { // Adjust colors to give a warm, slightly greenish-yellow tint data[i] = data[i] * 1.3; // Red - increased to 1.3 data[i + 1] = data[i + 1] * 1; // Green - unchanged data[i + 2] = data[i + 2] * 0.6; // Blue - decreased to 0.6 } ctx.putImageData(imageData, 0, 0); canvas.style.display = 'block'; // Prepare download button const downloadButton = document.getElementById('downloadButton'); downloadButton.style.display = 'block'; downloadButton.onclick = function() { const link = document.createElement('a'); link.download = file.name.replace(/\.[^/.]+$/, '') + '_Amelia.jpg'; link.href = canvas.toDataURL('image/jpeg'); link.click(); }; }; img.src = e.target.result; }; reader.readAsDataURL(file); });