Combinatore di immagini chiare/scure — un PNG per sfondi bianchi e neri
Unisci un'immagine in modalità chiara e una in modalità scura in un unico PNG trasparente che mostra l'illustrazione chiara su bianco e quella scura su nero. Carica entrambe, guarda l'anteprima del risultato affiancata e scarica un unico asset adatto al tema per documentazione, README o interfacce, tutto nel browser.
Cosa fa il combinatore di immagini chiare/scure
Un PNG, due aspetti
L'output è una composizione alpha pixel per pixel: su una superficie bianca appare come la tua immagine chiara, su una nera come quella scura. Così un README, una pagina di documentazione o un'interfaccia usa un solo file invece di due o di una media query.
Due slot di caricamento con anteprima dal vivo
Scegli un'immagine in modalità chiara e una in modalità scura; il PNG combinato compare non appena entrambe sono caricate, una volta su una card bianca e una volta su una card nera, così puoi valutare entrambi i temi prima di scaricare.
Esportazione PNG fissa
Il download produce sempre un PNG chiamato light-dark-image.png, generato con canvas.toDataURL. Non ci sono output JPEG, WebP o SVG né impostazioni di qualità o compressione.
Canvas dimensionato sull'immagine più grande
Il risultato usa la larghezza maggiore e l'altezza maggiore della coppia, e le due immagini di origine vengono allungate per riempire quel canvas dall'angolo in alto a sinistra. Le proporzioni diverse vengono distorte, non riempite con margini né ritagliate.
Locale e senza controlli di regolazione
I file vengono letti con FileReader e composti su un canvas: nulla viene caricato. Non ci sono controlli di luminosità, contrasto, dimensione, posizione, sfondo o formato; gli unici input sono le due immagini.
FAQ sulle immagini chiare/scure
A cosa serve davvero questo strumento?
Trasforma un'illustrazione in modalità chiara e una in modalità scura in un unico PNG trasparente il cui aspetto dipende dallo sfondo: le superfici bianche mostrano la versione chiara, quelle nere la versione scura. È pensato per asset adatti al tema in README, documentazione e interfacce, non per generare due immagini separate.
Quali impostazioni posso regolare?
Solo le due immagini di origine. Non ci sono controlli di luminosità, contrasto, colore, posizione, scala, colore di sfondo, formato o qualità, né regolazioni fini dell'unione; i pannelli di anteprima sono solo di visualizzazione.
Quali formati di input e output sono supportati?
L'input accetta image/* e usa il decoder del browser, quindi funzionano JPEG, PNG, WebP e GIF; l'output è sempre PNG. Non è offerta l'esportazione JPEG, WebP o SVG.
Posso elaborare più coppie contemporaneamente?
No. Ogni slot prende solo il primo file selezionato e la pagina elabora una coppia chiara/scura alla volta, senza coda, modalità batch né cronologia.
Ci sono limiti di dimensione e cosa succede se le dimensioni non coincidono?
Non c'è un limite di pixel esplicito oltre a quello consentito dalla memoria del canvas del browser. L'output è max(larghezza) × max(altezza), e le due immagini vengono allungate a quella dimensione dall'angolo in alto a sinistra, quindi proporzioni diverse vengono distorte invece di essere riempite o ritagliate.
È tutto locale?
Sì. Le immagini vengono decodificate con FileReader e unite in un canvas nel browser; nulla viene caricato e nessun server è coinvolto. Il risultato resta in memoria come data URL finché non lo scarichi.
Quanto è fedele il risultato?
È un'approssimazione. I canali chiari vengono rimappati su 128–255 e quelli scuri su 0–127, poi alfa e colore vengono risolti perché la coppia si componga correttamente su bianco puro e nero puro; i colori sono quantizzati, un contrasto estremo può perdere dettaglio e la formula è esatta solo su sfondi bianchi o neri puri (le superfici grigie o colorate si mescolano diversamente). La trasparenza deriva solo dall'alfa dell'immagine chiara, e quando le due immagini violano l'ipotesi di luminosità l'alfa del pixel viene portato a zero.
