Modificare un PNG nel browser: flusso completo
Importa, dipingi, esporta ed esamina un PNG locale con un esempio PhotoCraft riproducibile.
Il risultato che otterrai
Questa esercitazione porta un PNG locale attraverso un flusso completo di modifica nel browser: apertura in PhotoCraft, disegno di un segno evidente, esportazione PNG e ispezione del file fuori dall'editor. Salverai anche un checkpoint PSD, così un'immagine esportata non sarà l'unica copia rimasta. L'esempio usa la nostra immagine sintetica 320 × 320 e la release WebAssembly v0.12.0 bloccata. Non servono account né servizi di caricamento immagini.
L'obiettivo è una piccola modifica affidabile, non l'affermazione che ogni flusso immagini sia supportato. Parti da questo semplice esempio prima di aprire un documento importante. L'interfaccia originale dell'editor è in inglese anche quando il sito circostante è cinese, portoghese o italiano. I nomi menu seguenti si riferiscono alla tela dell'editor, non al menu File del browser. Il sito carica GA4 e Plausible self-hosted per misurare le visite; questi servizi non ricevono contenuti delle immagini né nomi file locali dai passaggi di modifica.
Prepara file e area di lavoro
Scarica il PNG di esempio in una nuova cartella. Conserva una copia intatta e crea una cartella output separata. L'esempio non contiene materiale personale. Se sostituisci una tua immagine, usa un duplicato e conferma di avere il permesso di modificarla. Evita di partire con un file enorme: un piccolo campione noto aiuta a distinguere un problema di avvio da un problema specifico del documento.
Apri l'editor nella homepage su uno schermo desktop. Attendi che tela e menu dell'applicazione siano visibili. La comparsa del titolo della homepage non significa che l'applicazione WebAssembly abbia terminato l'avvio. Se l'area resta vuota, segui la guida alla diagnosi dei renderer prima di tentare importazioni ripetute.
Parti dal campione noto per riconoscere subito il documento previsto.
Importa il PNG nell'applicazione
Trascina il PNG scaricato sulla tela dell'applicazione. Rilascialo dentro l'editor, non nell'articolo circostante né nella barra del browser. In alternativa usa il menu File dell'applicazione per selezionare il file locale. Conferma che l'immagine appaia come documento e che tu stia modificando la scheda prevista. Se il browser apre l'immagine in una pagina separata, torna all'editor e prova il menu dell'applicazione.
Fai clic dentro l'area di lavoro prima di usare scorciatoie. Focus del browser e focus dell'editor sono distinti. Su uno schermo piccolo i controlli possono ridurre lo spazio disponibile; usa l'interruttore dei pannelli o uno schermo più grande se necessario. Un test riuscito su schermo stretto non significa che la modifica touch sia comoda su ogni dispositivo. L'interfaccia originale era pensata per controlli in stile desktop.
Fai una modifica facile da ispezionare
Seleziona un pennello tra gli strumenti dell'editor e disegna al centro dell'esempio un tratto breve e chiaramente visibile. Scegli un colore in contrasto con i pixel vicini. Per questo primo esercizio evita il bordo dell'immagine e segni minuscoli con bassa opacità. L'obiettivo è riconoscere la modifica sia nell'applicazione sia nell'output scaricato, senza dover tirare a indovinare.
Se nessun segno appare, controlla documento attivo, strumento selezionato e se il puntatore è davvero sulla tela. Se il risultato è errato, annulla l'ultima operazione da Modifica e riprova. Non presumere che un cursore diverso provi che i pixel siano cambiati. Il nostro test automatico verifica i pixel esportati proprio perché mostrare controlli non dimostra una modifica funzionante.
Un segno evidente rende più facile accorgersi di un'esportazione errata o vecchia.
Esporta un PNG e controlla il download
Usa il menu File dell'editor e il suo comando di esportazione PNG. Attendi il completamento del download nel browser, poi individua il file reale su disco. Criteri di download, richieste e nomi duplicati variano. Se esiste già un file con lo stesso nome, il browser può aggiungere un numero. Controlla data e ora e apri l'output corretto invece di fidarti solo del nome mostrato.
Apri l'esportazione in un visualizzatore separato. Conferma che il segno sia presente e che le dimensioni restino 320 × 320 in questo esempio. Lo screenshot della tela non è l'immagine esportata: include il ridimensionamento dell'interfaccia e può contenere pannelli o elementi della pagina. Ispeziona il PNG stesso. Puoi confrontarlo con l'output modificato di esempio, ma un tratto disegnato a mano differirà naturalmente dal nostro tratto automatico.
Salva anche un checkpoint modificabile
Un PNG è un'immagine renderizzata, non una promessa di conservare il documento modificabile completo. Usa Salva come nell'editor per scaricare un PSD con un nome di checkpoint distinto. Conserva insieme PNG sorgente, PSD salvato e PNG finale esportato. Questa convenzione rende chiaro il ruolo di ogni file: input originale, checkpoint di lavoro e immagine da consegnare.
Prima di affidartene, riapri il PSD in PhotoCraft. Esporta un secondo PNG e confrontalo con il tuo risultato modificato. La nostra registrazione pubblicata del round trip copre questo piccolo flusso. Leggi la guida al supporto PSD prima di estendere la conclusione a livelli complessi, font o consegne a Photoshop. Salvare un file con estensione PSD è solo l'inizio di un controllo di compatibilità.
Problemi comuni e cosa controllare
| Sintomo | Primo controllo | Prossimo passo sicuro |
|---|---|---|
| Il browser apre il PNG come pagina | Dove hai rilasciato il file | Usa il menu File dell'editor |
| Una scorciatoia salva la pagina web | Focus fuori dalla tela | Annulla e usa il menu dell'applicazione |
| L'immagine esportata sembra invariata | Documento attivo e nome scaricato | Fai un segno chiaro ed esporta con un nuovo nome |
| Nessun file nella cartella prevista | Richieste e cronologia dei download | Trova il download completato prima di continuare |
| L'area di lavoro diventa vuota | Avvio del browser o guasto grafico | Salva se possibile, poi usa la guida alla diagnosi |
Non ricaricare la scheda come prima reazione all'incertezza. Questa build non ha salvataggio automatico né ripristino. Se la tela risponde ancora, salva un checkpoint prima di cambiare renderer, ricaricare o uscire. Se non risponde, conserva i file già scaricati; il sito non può recuperare un documento non salvato da una copia sul server.
Concludi con una consegna ripetibile
La cartella completata dovrebbe contenere la sorgente intatta, un PNG modificato e un checkpoint PSD verificato. Apri un'ultima volta il PNG finale e verifica modifica prevista, dimensioni e nome file. Condividi solo i file necessari al destinatario e spiega quale è immagine di riferimento e quale è destinato a ulteriori modifiche. Conserva le tue copie finché la consegna non è accettata.
I criteri pratici di successo sono semplici: l'originale resta intatto, i pixel esportati mostrano la modifica e un checkpoint salvato si può riaprire. Questi controlli danno più fiducia della sola comparsa dell'editor. Per sessioni più lunghe continua con il flusso di backup; per i limiti più ampi di questa versione leggi la recensione browser.