Un'immagine larga 1001 pixel tagliata in tre non fornisce tre tessere di 333. Dà 333, 334 e 333, e quale tessera ottiene il pixel extra decide se l'immagine torna insieme. Il modo ovvio per scrivere questo, dividendo la larghezza per il conteggio e usando quella dimensione per ogni tessera, scende di 2.333 pixel da un'immagine 1001 per 667 senza segnalare nulla. Le piastrelle stanno bene da sole. Il danno appare solo quando sono tornati uno accanto all'altro, come una linea sottile della cosa sbagliata lungo la cucitura, che su una griglia Instagram di nove pezzi è l'unico posto in cui ogni visitatore guarda.
tl; dr: Dividere un'immagine è una decisione aritmetica ripetuta: dove cade ogni taglio quando l'immagine non si divide uniformemente. Il calcolo di ogni confine da una singola sequenza arrotondata rende il bordo sinistro del bordo sinistro n+1 del mattone N+1, quindi i pezzi si rimontano esattamente. Verificato da hashing: un'immagine 1001x667 divisa in nove tessere e incollata indietro ha prodotto pixel grezzi con lo stesso MD5 dell'originale,
6fc1f790a418dc1ed3ee3d11747f1c20. L'approccio ingenuo perde 2.333 pixel dalla stessa immagine. la divisore di immagini Esegue nel browser e restituisce una zip.
Cosa significa dividere un'immagine qui?
Tagliando un'immagine in un insieme di più piccoli che la piastrellano esattamente, senza sovrapposizioni e nulla avanzate.
Due modi per dire quello che vuoi. Modalità griglia Prende un numero di righe e colonne, quindi un 3 per 3 fornisce nove tessere qualunque sia la dimensione dell'immagine. Modalità taglia Prende una larghezza e un'altezza della piastrella in pixel, e la griglia è comunque molti di questi adattati, con la colonna di destra e la riga inferiore che rimane.
I lavori dietro di esso sono specifici. Una griglia Instagram di nove pezzi da un'immagine. una grande mappa o poster suddiviso in fogli stampabili. Un foglio di sprite ritagliato in cornici. Un panorama diviso per un posto di carosello. In ognuno di essi i pezzi finiranno di nuovo adiacenti, motivo per cui le cuciture contano più di ogni altra cosa sull'operazione.
Perché una griglia non si divide uniformemente?
Perché le dimensioni dell'immagine sono qualunque cosa la fotocamera abbia prodotto e tre raramente ci entrano.
I pixel sono numeri interi, quindi un taglio cade su un limite di pixel o non esiste. Un'immagine la cui larghezza non è un multiplo del conteggio delle colonne ha un resto che deve andare da qualche parte e l'unica domanda è dove.
Misurato sulla sequenza che il divisore produce:
| Larghezza immagine | scavare | Larghezze piastrelle | somma |
|---|---|---|---|
| 1000 | 3 | 333, 334, 333 | 1000 |
| 1080 | 3 | 360, 360, 360 | 1080 |
| 1001 | 7 | 143 x 7 | 1001 |
| 4032 | 5 | 806, 807, 806, 807, 806 | 4032 |
Il resto è distribuito anziché scaricato. Un'immagine di 1000 pixel in tre parti fornisce 333, 334, 333, non 333, 333, 334, perché ogni confine è calcolato come round(total * i / count) dalla stessa sequenza. La differenza è invisibile su un'immagine e conta su una griglia, dove un pixel in più sulla tessera finale rende l'ultima colonna visibilmente più ampia del resto.
Nota la terza riga. 1001 diviso per 7 è esattamente 143 e molte dimensioni si dividono in modo pulito. L'aritmetica si mostra solo quando non lo fa.
Come fai a sapere che non si perde nulla alle cuciture?
Dividendo un'immagine e rimontandola, confrontando i pixel anziché guardarli.
Ho generato un'immagine 1001 per 667 di rumore deterministico, in modo che ogni pixel differisca dai suoi vicini e qualsiasi colonna duplicata o caduta sarebbe ovvia per un hash. Quindi l'ho diviso in un piano 3 per 3 usando il piano dello strumento, estrai ogni tessera e incollato ciascuno sulle coordinate da cui proviene:
source 1001x667 raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
reassembled 9 tiles raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
identico. Non simile, non visivamente indistinguibile: gli stessi byte. Nessun pixel è stato perso e nessuno è stato duplicato.
Le piastrelle che l'hanno prodotta non sono tutte della stessa dimensione, che è il punto:
334x222 333x222 334x222
334x223 333x223 334x223
334x222 333x222 334x222
Nove piastrelle, tre diverse larghezze e due diverse altezze tra di loro, che coprono 667.667 pixel, che è esattamente 1001 volte 667.
ora la versione ingenua dello stesso lavoro. afferrare floor(1001 / 3) e floor(667 / 3), usa 333 per 222 per ogni tessera e copri 999 per 666. Una striscia larga due pixel e un pixel alto non la trasforma mai in nessuna tessera. Cioè 2.333 pixel scartati silenziosamente e su una fotografia c'è il bordo destro dell'immagine.
Modalità griglia o dimensione fissa della piastrella?
Griglia quando il numero di pezzi conta. Dimensioni quando le dimensioni di ogni pezzo contano.
| VUOI | modo | perché |
|---|---|---|
| Nove post per una griglia di alimentazione | Griglia, 3 x 3 | il conteggio è il requisito |
| un poster su fogli A4 | Dimensione | La dimensione del foglio è il requisito |
| un foglio di sprite tagliato in cornici | Dimensione | La dimensione del telaio è fissa e nota |
| Un panorama in una giostra | Griglia, 1 riga | il conteggio è la lunghezza della giostra |
Le due modalità non sono d'accordo sugli avanzi, e questa è la vera differenza tra di loro. La modalità griglia distribuisce il resto, quindi ogni tile si trova all'interno di un pixel di ogni altro. La modalità Size ti dà esattamente le dimensioni che hai chiesto e inserisce l'intero resto nell'ultima riga e colonna.
Cosa succede all'ultima riga e colonna in modalità dimensione?
Ne escono più piccoli, e questo è deliberato.
Dividere un'immagine da 1000 x 800 in 300 x 300 tessere dà una griglia 4 per 3. Dodici tessere, di cui sei non sono 300 per 300:
r0c3 100x300 r1c3 100x300 r2c3 100x200
r2c0 300x200 r2c1 300x200 r2c2 300x200
Quelli coprono 800.000 pixel, esattamente la fonte. L'alternativa sarebbe ritagliare l'immagine in un numero intero di tessere, il che significa buttare via silenziosamente una striscia di 100 pixel sulla destra e una striscia di 200 pixel lungo il fondo. Uno strumento che lo fa decide per te che il bordo della tua immagine non ha importanza.
Se vuoi riquadri uguali, usa la modalità griglia. Se vuoi piastrelle di una determinata dimensione e l'immagine non si divide per essa, i pezzi di bordo sottodimensionati sono la risposta onesta.
Perché i file sono denominati R01-C01?
In modo che un ordinamento del file manager per nome ti dia l'ordine di lettura, che non farà altrimenti.
L'ordinamento è alfabetico, quindi tile-10 Ordina tra tile-1 e tile-2. Una griglia di dodici pezzi elencata in questo modo si riassembla nell'ordine sbagliato e chiunque lavori dai nomi dei file metti la riga dieci a cui appartiene la riga due.
I numeri sono imbottiti alla larghezza dell'indice più grande, quindi il riempimento appare solo quando è necessario:
3 x 3 grid shot-r3-c3.png
12 x 12 grid My-Holiday-Photo-r01-c01.png ... My-Holiday-Photo-r12-c12.png
Il nome originale è mantenuto, con spazi e tutto ciò che non è un personaggio di parole trasformato in trattini, quindi un file che proveniva da un telefono ti dice ancora di cosa si trattava.
PNG o JPG per le tessere?
PNG a meno che le piastrelle non siano fotografie e la dimensione totale non sia un problema.
La divisione è di per sé senza perdite: i pixel in una tessera sono i pixel dalla sorgente. Salvare come PNG lo mantiene così, perché png è un formato senza perdita. Il salvataggio come JPG ripropone ogni tessera, che su una fotografia che era già un JPEG significa una seconda generazione di perdite.
C'è un motivo specifico per la divisione per preferire PNG, oltre a quello abituale. JPEG si comprime in 8 per 8 blocchi e i suoi artefatti sono più forti ai bordi di quei blocchi. Ogni limite di tessere è un nuovo vantaggio in un nuovo file, codificato senza alcuna conoscenza del suo vicino, quindi le tessere JPEG possono mostrare una debole discontinuità esattamente lungo le cuciture che stavi cercando di rendere invisibile. PNG non ha un tale comportamento.
JPG at Quality 0.92 è ciò che lo strumento scrive quando lo scegli, che è un'impostazione ragionevole e ancora una seconda generazione. Per nove tessere di una fotografia diretta verso un feed sociale che le ricomprimerà comunque, è un commercio difendibile. Per qualsiasi cosa venga stampata o riassemblata, png.
Quante piastrelle puoi fare?
Quattrocento, che è una griglia 20 per 20, e il limite riguarda il browser piuttosto che l'aritmetica.
Ogni piastrella diventa la propria tela e il proprio blob codificato prima che qualsiasi cosa venga compressa, quindi quattrocento tessere significano quattrocento tele e quattrocento codifiche in una scheda. Oltre a ciò, la codifica inizia a bloccare la pagina piuttosto che finire lentamente.
21 x 21 -> That is 441 tiles. The limit is 400, which is a 20 by 20 grid.
Un secondo controllo cattura l'altra estremità. Non puoi tagliare un'immagine in più parti di quelle che ha pixel lungo quell'asse, quindi chiedere 80 righe da un'immagine alta 50 pixel viene rifiutata con le dimensioni effettive dell'immagine, anziché produrre 30 tessere di altezza zero.
Una griglia di nove pezzi si schiererà su Instagram?
I pezzi saranno giusti. Se l'illusione funziona è una domanda separata con due parti.
Innanzitutto, la forma. Una griglia di alimentazione è celle quadrate, quindi una sorgente quadrata divisa 3 per 3 fornisce tessere quadrate e tutto corrisponde. Una fotografia 4:3 divisa 3 per 3 fornisce tessere 4:3 e il feed ne ritaglierà ciascuna in un quadrato in modo indipendente, che rompe l'immagine. Ritaglia o riempia la sorgente in un quadrato prima di dividere, non dopo.
Secondo, l'ordine. Un feed riempie prima il più nuovo, dall'alto a sinistra, che si muove a destra. Quindi la tessera che desideri nell'angolo in alto a sinistra deve essere l'ultima pubblicata. L'ordine di pubblicazione è il contrario dell'ordine di lettura: inizia con la tessera in basso a destra e finisci con la parte superiore sinistra. Pubblicandoli nell'ordine i file sono numerati mette l'immagine capovolta e indietro in avanti.
Anche le cuciture non saranno invisibili, perché la griglia attira un piccolo spazio tra le miniature. L'effetto è un'immagine vista attraverso un inquadramento della finestra piuttosto che un'immagine continua, che è l'aspetto di ogni post della griglia e ciò che le persone si aspettano.
Che dimensioni dovrebbero essere le piastrelle per la stampa su fogli?
Lavora all'indietro dalla carta e dalla risoluzione della stampante e aspettati che la somma sia maggiore dell'immagine che hai.
A4 è di 210 per 297 millimetri. A 300 punti per pollice, che è il solito obiettivo per qualcosa che viene guardato da vicino, ovvero 2.480 per 3.508 pixel per foglio. Un poster su un 3 per 3 di A4 vuole quindi una sorgente di 7.440 per 10.524 pixel, che è di 78 megapixel. Una foto da un telefono recente è di circa 12.
Quindi la versione onesta di questo lavoro è solitamente una risoluzione inferiore a 300 dpi, o meno fogli, o accettando che la stampa sarà morbida. A 150 dpi lo stesso 3 per 3 ha bisogno di 3.720 per 5.262, che è alla portata di una buona fotocamera. La divisione non può aggiungere dettagli, decide solo dove cadono i tagli.
Una cosa da sistemare prima di stampare anziché dopo. Le stampanti consumer non possono stampare fino al bordo del foglio, quindi ogni tessera arriva con un margine bianco e nove fogli nastrati insieme mostrano nove bordi bianchi attraverso l'immagine. La risposta abituale è stampare senza bordi se la stampante la supporta o tagliare ciascun foglio lungo un bordo e sovrapporlo. Questo strumento taglia esattamente, senza sanguinare e senza sovrapposizioni, quindi la sovrapposizione deve provenire dalla fonte: dividere una griglia leggermente più grande e accettare di perdere una striscia, o aggiungere il sanguinamento prima di dividerlo.
La divisione perde qualità?
Il taglio no. Il risparmio potrebbe e il ridimensionamento che nessuno menziona lo fa sicuramente.
Ogni tessera viene estratta dall'immagine di origine in una tela di esattamente dimensione della tessera, un pixel di origine in un pixel di destinazione, senza alcun ridimensionamento. quella è una copia. L'hash test sopra ne è la prova.
Dove va la qualità è l'encoder, coperto sopra, e una cosa al di fuori di questo strumento: ovunque carichi le tessere probabilmente le ridimensionerà. Una tessera 360 x 360 postata in un feed che vuole 1080 per 1080 verrà ridimensionata dalla piattaforma e l'upscaling inventa i pixel. Se le tessere sono destinate a un posto con una dimensione nota, dividere una sorgente abbastanza grande da consentire a ciascuna tessera almeno di quella dimensione.
Perché il download arriva come zip?
Perché nove file, o quattrocento, non sono qualcosa che un browser può consegnarne uno alla volta senza combattere.
Una pagina che attiva diversi download in sequenza viene bloccata dalla maggior parte dei browser dopo il primo, che è una protezione ragionevole contro una pagina che vuole inserire venti cose nella cartella dei download. Costruire un chiudere la ce Nella pagina e nell'offerta di un file è il modo di aggirarlo, e mantiene intatte le tessere insieme ai loro nomi, che è la parte che conta per il rimontaggio.
L'archivio è costruito in memoria, che è un altro motivo per il soffitto di piastrelle di quattrocento: la scheda contiene l'immagine di origine, la tela di ogni piastrella, ogni blob codificato e l'archivio finito allo stesso tempo.
Cosa non fa la scissione
Taglia un rettangolo in una griglia di rettangoli. Non c'è nient'altro in esso.
Nessuna sovrapposizione tra le tessere, che alcuni flussi di lavoro di mappatura desiderano. Nessun segno di spurgo o ritaglio per la stampa. Nessun pezzo non rettangolare. Nessun ritaglio automatico in un quadrato prima della divisione. nessun rimontaggio, che è il lavoro opposto e appartiene la fusione dell'immagine, coperto La sua guida.
Se vuoi un puzzle, un mosaico o le tessere con sovrapposizione, questo non è quello strumento e vale la pena conoscere il divario prima di iniziare piuttosto che dopo nove file atterrano nella cartella dei download.
Perché questo viene eseguito nel browser?
Perché tagliare un rettangolo da un'immagine è qualcosa una tela lo fa in modo nativo, e un server non aggiunge altro che una copia della tua immagine sul disco di qualcun altro.
L'immagine viene decodificata nella scheda, ogni tessera viene disegnata nella propria tela, ogni tela è codificata con toBlob, e la collezione è zippata e restituita. Non viene caricato nulla e non viene memorizzato nulla.
Le immagini che le persone divise non sono sempre una foto delle vacanze per un feed. Sono planimetrie, documenti scansionati, immagini mediche, schermate di sistemi interni, opere d'arte prima che vengano pubblicate. Per quelli, l'alternativa abituale invia l'intera immagine a un servizio in cambio di un'operazione che la tua macchina esegue in una frazione di secondo.
