Immagini e foto · Browser Editor di immagini e disegni
Come funziona il ritaglio in un editor di immagini del browser: tela e pixel
· Come funziona
modifica delle immagini tela elaborazione del browser
Il ritaglio sembra banale, ma un editor del browser deve decodificare il file, copiare un rettangolo di pixel su una tela e codificare un file nuovo di zecca. Questo post illustra ogni passaggio e spiega cosa cambia e cosa rimane identico.
Perché una foto ritagliata è un nuovo file, non uno vecchio ritagliato: il ritaglio non può semplicemente eliminare byte da un JPEG o PNG, quindi l'editor decodifica e ricodifica
Un JPEG memorizza i dati dell'immagine compressi, non un intervallo di byte cancellabili in modo indipendente per riga visibile. Tagliare i byte alla fine corromperebbe il file, non taglierebbe una fotografia. Un editor del browser decodifica quindi l'immagine, seleziona un rettangolo e crea un nuovo file codificato. L'originale rimane sul tuo disco. Se hai bisogno di una modifica reversibile, mantieni la sorgente e le coordinate di selezione: il ritaglio esportato non contiene i pixel mancanti.
Decodifica dell'immagine in bitmap: il modo in cui il browser trasforma i byte compressi in una griglia di larghezza x altezza di RGBA pixel prima che qualsiasi cosa possa essere selezionata
Il browser trasforma JPEG, PNG o WebP compresso in una bitmap con campioni di larghezza × altezza. Un'immagine 4000×3000 rappresenta dodici milioni di pixel prima di qualsiasi ritaglio e diversi byte per pixel possono rendere la sua impronta in memoria molto più grande del file su disco. ToolAcre controlla i limiti di immagini e tele prima di allocare spazi di lavoro molto grandi. Ciò che vedi sullo schermo può essere ingrandito per adattarlo al viewport; il rettangolo di ritaglio deve ancora essere mappato sulle coordinate dell'immagine prima che i pixel vengano copiati.
Selezione di un rettangolo: coordinate di origine e destinazione: come drawImage copia una regione scelta su una tela della dimensione di destinazione e cosa significa arrotondamento a pixel interi
Un rettangolo è un'origine (x,y) più larghezza e altezza, misurate in pixel di origine. ToolAcre vincola il rettangolo ai limiti del documento e ritaglia ogni livello visibile, non solo uno screenshot dell'anteprima composita. Per ogni livello crea una tela di destinazione e chiama drawImage con nove argomenti: tela di origine, rettangolo di origine, origine di destinazione e dimensione di destinazione. Con le stesse dimensioni di origine e destinazione, i pixel vengono selezionati senza un passaggio di ridimensionamento. Le posizioni frazionarie del puntatore vengono arrotondate o fissate a pixel di tela rappresentabili.
Codifica del risultato in un file: perché la fase di esportazione decide il formato e la qualità e perché il ritaglio stesso è esatto mentre la codifica potrebbe non esserlo
L'esportazione è un'operazione separata dal raccolto. L'area di disegno modificata può essere codificata come PNG, JPEG o WebP a seconda delle opzioni e del supporto del browser. PNG può preservare i pixel forniti al suo codificatore senza perdita di dati; JPEG elimina alcuni dettagli anche se il rettangolo è stato selezionato esattamente e la trasparenza richiede uno sfondo intenzionale quando si utilizza un formato senza alfa. Il nuovo file può anche omettere metadati di origine o informazioni sul colore, quindi non descriverlo mai come un sottoinsieme byte per byte dell'originale.
Esempio funzionante: ritagliare una foto 4000×3000 in un banner 1600×900 seguendo il conteggio dei pixel durante la decodifica, la copia e l'esportazione
Per un blogger con una foto 4000×3000, un banner centrato 1600×900 inizia da x=1200 e y=1050. drawImage copia le colonne da 1200 a 2799 e le righe da 1050 a 1949 in un output 1600×900: 1.44 milioni di pixel invece di dodici milioni. Se invece chiedi all'editor di ridurre l'intera fotografia a 1600×900, cambierai le sue proporzioni e ricampionerai invece di effettuare questo ritaglio. Su un telefono con memoria limitata l'editor potrebbe ridurre prima un input molto grande, quindi controlla le dimensioni visualizzate prima di ripetere queste coordinate.
Ciò che un raccolto esportato non può recuperare dal quadro originale
Questo non è un ritaglio di blocchi JPEG senza perdita di dati: l'applicazione disegna pixel ed esporta un nuovo contenitore. Né il file esportato 1600×900 può recuperare i margini scartati dopo aver chiuso l'originale. Un documento di modifica a più livelli è ancora diverso: il ritaglio agisce sui livelli del documento, mentre l'esportazione li compone nell'immagine scaricata. Per il materiale sensibile, ritagliare un margine è più sicuro che disegnare semplicemente una sovrapposizione opaca, ma ispeziona i pixel esportati e mantieni privato l'originale.
Conclusione: pixel esatti, nuovo contenitore: perché il ritaglio del browser è preciso e come lo esegue l'editor di immagini e disegni del browser senza caricare il file
Un ritaglio del browser determina con precisione quali pixel decodificati conservare, mentre il codificatore scelto controlla il file scaricato. L'editor di immagini e disegni del browser esegue entrambi i passaggi sul tuo dispositivo: carica un'immagine, seleziona un rettangolo, applica il ritaglio ed esporta. La rete non ha bisogno dei byte di foto per nessuno dei due passaggi, ma le risorse del sito e le richieste AdSense/analytics divulgate non devono essere confuse con il caricamento di un file in DevTools.