Il filtro che trovi in questa pagina è un omaggio al leggendario film “Metropolis” (1927), diretto da Fritz Lang. Ambientato in un futuro distopico, “Metropolis” esplora la divisione tra le classi sociali e la lotta per l’umanità in una città meccanizzata e opprimente. Il film è celebre per la sua straordinaria estetica visiva, caratterizzata da un’architettura futuristica, effetti di luce innovativi e un’atmosfera di tensione urbana.
“Metropolis” è un capolavoro del cinema espressionista tedesco e un pilastro della fantascienza, noto per le sue immagini iconiche che rappresentano una città dominata da macchine e grattacieli imponenti. Le scene del film sono caratterizzate da forti contrasti di luce e ombra, creando un senso di drammaticità e profondità.
Il filtro applicato in questa pagina ricrea l’estetica classica di “Metropolis” con un effetto che evoca l’era del cinema muto e la visione futuristica del film. Utilizzando una combinazione di tonalità in bianco e nero, e aggiungendo effetti di contrasto e luminosità, il filtro trasforma le immagini in qualcosa che sembra uscito direttamente dagli anni ’20, con un tocco di nostalgia per l’epoca d’oro del cinema espressionista.
Usa il tasto “Sfoglia” per caricare l’immagine che desideri trasformare. Dopo aver applicato il filtro, potrai scaricare l’immagine modificata cliccando sul tasto “Scarica con filtro Metropoli”.
Buon viaggio nel mondo surreale, ma non troppo, con questo filtro!
Filtro Metropoli
/* ==================================================
Global Styles
================================================== */
/* Stile del corpo della pagina */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
background-color: #2e2e2e; /* Sfondo grigio scuro */
color: #000000; /* Testo del body in NERO */
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #1f1f1f 25%, #3e3e3e 100%); /* Gradient per effetto metallo */
}
/* Titolo della pagina */
h1 {
font-size: 2em;
margin-bottom: 20px;
color: #ffffff; /* Colore del testo del titolo bianco chiaro */
position: relative;
text-shadow:
0 0 10px #8b8b8b, /* Bagliore grigio chiaro */
0 0 20px #8b8b8b,
0 0 30px #8b8b8b,
0 0 40px #8b8b8b; /* Bagliore più intenso */
}
/* ================================================
Upload Container
================================================ */
/* Contenitore del pulsante di upload */
.upload-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 2px solid #ffffff; /* Bordo bianco chiaro */
background-color: #2e2e2e; /* Sfondo grigio scuro */
color: #f0f0f0; /* Testo grigio chiaro */
border-radius: 8px; /* Angoli arrotondati */
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* Effetto alone bianco */
position: relative;
}
/* Stile del pulsante di upload */
input[type="file"] {
background-color: #555; /* Colore di sfondo del pulsante di upload */
color: #f0f0f0; /* Testo grigio chiaro */
cursor: pointer;
border: none;
border-radius: 8px; /* Angoli arrotondati */
padding: 10px 14px;
font-weight: bold;
z-index: 1; /* Assicurati che il testo e il pulsante siano sopra l'effetto puntinato */
}
/* Stato hover del pulsante di upload */
input[type="file"]::file-selector-button:hover {
background-color: #333; /* Colore di sfondo al passaggio del mouse */
}
/* Nome del file */
.file-name {
display: none; /* Nasconde il testo del nome del file */
}
/* Stile del pulsante di upload */
input[type="file"] {
background-color: #555; /* Colore di sfondo del pulsante di upload */
color: #f0f0f0; /* Testo grigio chiaro */
cursor: pointer;
border: none;
border-radius: 8px; /* Angoli arrotondati */
padding: 12px 20px; /* Maggiore padding per allungare il pulsante */
font-weight: bold;
z-index: 1; /* Assicurati che il testo e il pulsante siano sopra l'effetto puntinato */
width: 300px; /* Imposta una larghezza fissa per il pulsante */
text-align: center; /* Centra il testo */
}
/* Stato hover del pulsante di upload */
input[type="file"]::file-selector-button:hover {
background-color: #333; /* Colore di sfondo al passaggio del mouse */
}
/* ================================================
Canvas
================================================ */
/* Stile del canvas */
canvas {
display: none;
margin-top: 20px;
border: 2px solid #ffffff; /* Bordo bianco chiaro */
background-color: #1e1e1e; /* Sfondo leggermente più chiaro per il canvas */
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(138, 43, 226, 0.5); /* Effetto alone bianco e viola */
max-width: 750px;
border-radius: 8px; /* Angoli arrotondati */
}
/* ================================================
Download Button
================================================ */
/* Stile del pulsante di download */
#downloadButton {
display: none;
margin-top: 20px;
padding: 12px 24px;
border: 2px solid #cccccc; /* Bordo grigio c */
background-color: #bbbbbb; /* Sfondo grigio b */
color: #2e2e2e; /* Testo grigio scuro */
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 8px; /* Angoli arrotondati */
font-weight: bold;
position: relative;
overflow: hidden; /* Necessario per il contenuto del pseudo-elemento */
}
/* Stato hover del pulsante di download */
#downloadButton:hover {
background: #b8b8b8; /* Sfondo grigio scuro al passaggio del mouse */
}
/* Effetto del bagliore sul pulsante di download */
#downloadButton::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;
}
/* Stato hover del pulsante di download */
#downloadButton:hover::after {
transform: scale(1);
}
/* Effetto di sezione aggiuntivo per il pulsante di download */
#downloadButton::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.4) 100%);
z-index: 0;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
/* Stato hover del pulsante di download */
#downloadButton:hover::before {
opacity: 1;
}
/* ================================================
Filtro Cinematografico
================================================ */
/* Filtro Metropoli */
.filter-Metropoli {
filter: grayscale(100%) brightness(1.2) contrast(1.8);
}
Applica il filtro Metropoli
// Variabili globali
const uploadInput = document.getElementById('upload');
const canvas = document.getElementById('canvas');
const downloadButton = document.getElementById('downloadButton');
const ctx = canvas.getContext('2d');
// Configurazione del filtro Metropoli
const filterConfig = {
title: 'Metropoli', // Nome del filtro
brightness: 1.2, // Aumento della luminosità
contrast: 1.8, // Contrasto del filtro
};
// Imposta il testo del pulsante di download
document.querySelector('#downloadButton').textContent = `Scarica con filtro ${filterConfig.title}`;
// Variabile per memorizzare il nome del file
let fileName = '';
uploadInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) {
return;
}
fileName = file.name; // Salva il nome del file
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
let width = img.width;
let height = img.height;
if (width > 750) {
const ratio = 750 / width;
width = 750;
height = height * ratio;
}
canvas.width = width;
canvas.height = height;
// Applica il filtro Metropoli
ctx.filter = `grayscale(100%) brightness(${filterConfig.brightness}) contrast(${filterConfig.contrast})`;
ctx.drawImage(img, 0, 0, width, height);
canvas.style.display = 'block';
downloadButton.style.display = 'block';
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
// Abilita il pulsante di download
downloadButton.onclick = function() {
// Rimuove il filtro temporaneamente per il download
ctx.filter = `none`;
ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
// Applica di nuovo il filtro Metropoli per la visualizzazione
ctx.filter = `grayscale(100%) brightness(${filterConfig.brightness}) contrast(${filterConfig.contrast})`;
const dataURL = canvas.toDataURL('image/jpeg');
// Crea un link per scaricare l'immagine
const link = document.createElement('a');
link.download = fileName.replace(/\.[^/.]+$/, '') + `_${filterConfig.title}.jpg`;
link.href = dataURL;
link.click();
};