Una imagen de 1001 píxeles de ancho cortada en tres no da tres mosaicos de 333. Da 333, 334 y 333, y qué mosaico obtiene el píxel adicional decide si la imagen vuelve a estar junta. La forma obvia de escribir esto, dividiendo el ancho por el conteo y usando ese tamaño para cada mosaico, elimina 2333 píxeles de una imagen de 1001 por 667 sin informar nada. Los azulejos se ven bien por su cuenta. El daño solo aparece cuando están de vuelta uno al lado del otro, como una delgada línea de lo incorrecto en la costura, que en una cuadrícula de Instagram de nueve piezas es el único lugar donde cada visitante mira.
TL;Dr: Dividir una imagen es una decisión aritmética repetida: ¿dónde cae cada corte cuando la imagen no se divide uniformemente? El cálculo de cada límite desde una secuencia redondeada hace que el borde derecho de N.° de azulejo n+1 se reubique exactamente. Verificado por hashing: una imagen de 1001x667 dividida en nueve teselas y pegadas producidas píxeles RAW con el mismo MD5 que el original,
6fc1f790a418dc1ed3ee3d11747f1c20. El enfoque ingenuo suelta 2.333 píxeles de la misma imagen. los Divisor de imagen Se ejecuta en el navegador y devuelve un zip.
¿Qué significa dividir una imagen aquí?
Cortar una imagen en un juego de más pequeños que la enlaza exactamente, sin superposición y sin nada.
Dos formas de decir lo que quieras. Modo de rejilla Toma varias filas y columnas, por lo que un 3 por 3 da nueve mosaicos, sea cual sea el tamaño de la imagen. Modo de tamaño Toma un ancho y una altura de mosaico en píxeles, y la cuadrícula es, sin embargo, muchos de ellos encajan, siendo la columna de la derecha y la fila inferior lo que quede.
Los trabajos que hay detrás son específicos. Una cuadrícula de Instagram de nueve piezas de una imagen. Un gran mapa o póster dividido en hojas imprimibles. Una hoja de sprite cortada en marcos. Un panorama dividido para un puesto de carrusel. En cada uno de ellos las piezas terminarán de nuevo adyacentes, por lo que las costuras importan más que cualquier otra cosa sobre la operación.
¿Por qué una cuadrícula no se divide uniformemente?
Porque las dimensiones de la imagen son lo que la cámara produjo, y rara vez se aplican tres.
Los píxeles son enteros, por lo que un corte cae en un límite de píxeles o no existe. Una imagen cuyo ancho no es un múltiplo del conteo de columnas tiene un resto que debe ir a alguna parte, y la única pregunta es dónde.
Medido en la secuencia que produce el divisor:
| Ancho de la imagen | entrecortar | Anchos de baldosas | cantidad |
|---|---|---|---|
| 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 |
El resto se distribuye en lugar de verter. Una imagen de 1000 píxeles en tres partes da 333, 334, 333, no 333, 333, 334, porque cada límite se calcula como round(total * i / count) de la misma secuencia. La diferencia es invisible en una imagen y importa en una cuadrícula, donde un píxel adicional en el mosaico final hace que la última columna sea visiblemente más ancha que el resto.
Tenga en cuenta la tercera fila. 1001 dividido por 7 es exactamente 143, y muchas dimensiones se dividen limpiamente. La aritmética sólo se muestra cuando no lo hacen.
¿Cómo sabes que nada se pierde en las costuras?
Dividiendo una imagen y volviendo a armarla, luego comparando los píxeles en lugar de mirarlos.
Generé una imagen de 1001 por 667 de ruido determinista, de modo que cada píxel difiere de sus vecinos y cualquier columna duplicada o caída sería obvia para un hash. Luego lo dividí en 3 por 3 usando el plan de la herramienta, extraje cada mosaico y pegué cada uno de nuevo en las coordenadas de las que proviene:
source 1001x667 raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
reassembled 9 tiles raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
idéntico. No similar, no visualmente indistinguible: los mismos bytes. No se perdió ningún píxel y ninguno se duplicó.
Las fichas que la produjeron no son todas del mismo tamaño, que es el punto:
334x222 333x222 334x222
334x223 333x223 334x223
334x222 333x222 334x222
Nueve fichas, tres anchos diferentes y dos alturas diferentes entre ellas, cubriendo 667.667 píxeles, que es exactamente 1001 veces 667.
Ahora la versión ingenua del mismo trabajo. prender floor(1001 / 3) y floor(667 / 3), use 333 por 222 para cada mosaico, y cubre 999 por 666. Una tira de dos píxeles de ancho y un píxel de alto nunca se convierte en ningún mosaico. Eso es 2.333 píxeles descartados silenciosamente, y en una fotografía es el borde derecho de la imagen.
¿Modo de cuadrícula o tamaño de mosaico fijo?
cuadrícula cuando el número de piezas importa. Tamaño cuando las dimensiones de cada pieza importan.
| tu quieres | modo | porque |
|---|---|---|
| Nueve publicaciones para una red de alimentación | Rejilla, 3 x 3 | El conteo es el requisito |
| Un cartel a través de hojas A4 | Tamaño | El tamaño de la hoja es el requisito |
| una hoja de sprite cortada en marcos | Tamaño | El tamaño del marco es fijo y conocido |
| Un panorama en un carrusel | Rejilla, 1 fila | La cuenta es la longitud del carrusel |
Los dos modos no están de acuerdo con las sobras, y esa es la verdadera diferencia entre ellos. El modo de cuadrícula distribuye el resto, por lo que cada mosaico está dentro de un píxel de cada uno. El modo de tamaño le da exactamente el tamaño que solicitó y coloca el resto en la última fila y columna.
¿Qué sucede con la última fila y columna en el modo Tamaño?
Salen más pequeños, y eso es deliberado.
Dividir una imagen de 1000 por 800 en 300 por 300 fichas da una cuadrícula de 4 por 3. Doce fichas, de las cuales seis no son 300 por 300:
r0c3 100x300 r1c3 100x300 r2c3 100x200
r2c0 300x200 r2c1 300x200 r2c2 300x200
Esos cubren 800.000 píxeles, exactamente la fuente. La alternativa sería reducir la imagen a una cantidad completa de mosaicos, lo que significa tirar silenciosamente una tira de 100 píxeles a la derecha y una tira de 200 píxeles en la parte inferior. Una herramienta que hace eso es decidir para ti que el borde de tu imagen no importa.
Si desea que los mosaicos sean iguales, use el modo de cuadrícula. Si desea mosaicos de un tamaño determinado y la imagen no se divide por ella, las piezas de borde de tamaño insuficiente son la respuesta honesta.
¿Por qué los archivos se llaman R01-C01?
De modo que un administrador de archivos que ordena por nombre le da el orden de lectura, lo que no hará de otra manera.
La clasificación es alfabética, por lo que tile-10 ordena entre tile-1 y tile-2. Una cuadrícula de doce piezas listada de esa manera se vuelve a ensamblar en el orden incorrecto, y cualquiera que trabaje a partir de los nombres de archivo coloca la fila diez donde pertenece la fila dos.
Los números se rellenan al ancho del índice más grande, por lo que el relleno aparece solo cuando se necesita:
3 x 3 grid shot-r3-c3.png
12 x 12 grid My-Holiday-Photo-r01-c01.png ... My-Holiday-Photo-r12-c12.png
Se mantiene el nombre original, con espacios y cualquier cosa que no sea una palabra de carácter convertido en guiones, por lo que un archivo que viene de un teléfono todavía te dice lo que era.
PNG o JPG para los azulejos?
png a menos que los mosaicos sean fotografías y el tamaño total sea un problema.
La división no tiene pérdidas en sí misma: los píxeles de un mosaico son los píxeles de la fuente. Guardar como PNG lo mantiene así, porque PNG es un formato sin pérdidas. Guardar como JPG vuelve a codificar cada mosaico, que en una fotografía que ya era JPEG significa una segunda generación de pérdidas.
Hay una razón específica para dividir para preferir PNG, más allá de la habitual. JPEG se comprime en 8 por 8 bloques, y sus artefactos son más fuertes en los bordes de esos bloques. Cada límite de mosaico es un nuevo borde en un archivo nuevo, codificado sin conocimiento de su vecino, por lo que los mosaicos JPEG pueden mostrar una débil discontinuidad exactamente a lo largo de las costuras que estabas tratando de hacer invisible. PNG no tiene tal comportamiento.
JPG en Quality 0.92 es lo que escribe la herramienta cuando la eliges, que es un entorno razonable y aún una segunda generación. Para nueve fichas de una fotografía que se dirige a un feed social que los recomprimirá de todos modos, es un comercio defendible. Para cualquier cosa que se imprima o vuelva a montar, png.
¿Cuántos azulejos puedes hacer?
Cuatrocientos, que es una cuadrícula de 20 por 20, y el límite se trata del navegador en lugar de la aritmética.
Cada azulejo se convierte en su propio lienzo y su propio blob codificado antes de que se comprima algo, por lo que cuatrocientas fichas significan cuatrocientos lienzos y cuatrocientos codificados en una pestaña. Más allá de eso, la codificación comienza a detener la página en lugar de terminar lentamente.
21 x 21 -> That is 441 tiles. The limit is 400, which is a 20 by 20 grid.
Una segunda comprobación atrapa el otro extremo. No puede cortar una imagen en más partes que en píxeles a lo largo de ese eje, por lo que se rechaza pedir 80 filas de una imagen de 50 píxeles de altura con el tamaño real de la imagen, en lugar de producir 30 mosaicos de altura cero.
¿Se alineará una cuadrícula de nueve piezas en Instagram?
Las piezas serán correctas. Si la ilusión funciona es una pregunta separada con dos partes.
Primero, la forma. Una cuadrícula de alimentación son celdas cuadradas, por lo que una fuente cuadrada dividida 3 por 3 da mosaicos cuadrados y todo coincide. Una fotografía 4:3 dividida 3 por 3 da fichas que son 4:3, y el alimento recortar cada uno a un cuadrado de forma independiente, lo que rompe la imagen. Recorte o rellene la fuente a un cuadrado antes de dividirlo, no después.
Segundo, el orden. Un feed se llena primero, desde arriba a la izquierda, moviéndose a la derecha. Por lo tanto, el mosaico que desea en la esquina superior izquierda debe ser el último publicado. El orden de publicación es el reverso del orden de lectura: comience con el mosaico inferior derecho y termine con la parte superior izquierda. Publicarlos en el orden Los archivos están numerados pone la imagen al revés y de nuevo al frente.
Las costuras tampoco serán invisibles, porque la cuadrícula dibuja un pequeño espacio entre las miniaturas. El efecto es una imagen que se ve a través de un marco de ventana en lugar de una imagen continua, que es lo que se ve cada publicación de cuadrícula y lo que la gente espera.
¿Qué tamaño deben tener los azulejos para imprimir en hojas?
Trabaje hacia atrás desde el papel y la resolución de la impresora, y espere que la suma sea mayor que la imagen que tiene.
A4 es 210 por 297 milímetros. A 300 puntos por pulgada, que es el objetivo habitual de algo que se mira de cerca, es decir, 2.480 por 3.508 píxeles por hoja. Por lo tanto, un cartel en un 3 por 3 de A4 quiere una fuente de 7440 por 10.524 píxeles, que es de 78 megapíxeles. Una foto de un teléfono reciente tiene alrededor de 12 años.
Por lo tanto, la versión honesta de este trabajo suele tener una resolución inferior a 300 dpi, o menos hojas, o aceptando que la impresión será suave. A 150 dpi, lo mismo 3 por 3 necesita 3.720 por 5.262, lo que está al alcance de una buena cámara. La división no puede agregar detalles; solo decide dónde caen los cortes.
Una cosa para resolver antes de imprimir en lugar de después. Las impresoras de consumo no pueden imprimir hasta el borde de la hoja, por lo que cada mosaico llega con un margen blanco y nueve hojas juntas muestran nueve bordes blancos a través de la imagen. La respuesta habitual es imprimir sin bordes si la impresora lo soporta o recortar cada hoja a lo largo de un borde y superponerlas. Esta herramienta corta exactamente, sin sangrado y sin superposición, por lo que la superposición debe provenir de la fuente: dividir una cuadrícula un poco más grande y aceptar perder una tira, o agregar el sangrado usted mismo antes de dividirse.
¿La división pierde calidad?
El corte no. El poder de salvación, y el cambio de tamaño que nadie menciona definitivamente lo hace.
Cada mosaico se dibuja desde la imagen de origen en un lienzo del tamaño de la baldosa, un píxel de origen a un píxel de destino, sin escalar. Esa es una copia. La prueba de hash anterior es la prueba de ello.
Donde va la calidad es el codificador, cubierto arriba, y una cosa fuera de esta herramienta por completo: en cualquier lugar donde cargue, los mosaicos probablemente los cambiará. La plataforma 360 por 360 publicada en un feed que quiere 1080 por 1080 será ampliada por la plataforma, y la ampliación inventará píxeles. Si las fichas están destinadas a algún lugar con un tamaño conocido, divida una fuente lo suficientemente grande como para que cada mosaico tenga al menos ese tamaño.
¿Por qué la descarga viene como un zip?
Porque nueve archivos, o cuatrocientos, no son algo que un navegador pueda entregar de uno en uno sin pelear.
La mayoría de los navegadores bloquean una página que activa varias descargas en secuencia, que es una protección sensata contra una página que quiere poner veinte cosas en su carpeta de descargas. construyendo un cierre En la página y ofrecer un archivo es el camino a su alrededor, y también mantiene intactos los mosaicos con sus nombres, que es la parte que importa para el montaje.
El archivo está construido en memoria, que es otra razón para el techo de cuatrocientos en mosaico: la pestaña contiene la imagen de origen, cada lienzo de mosaico, cada blob codificado y el archivo terminado al mismo tiempo.
Lo que la división no hace
Corta un rectángulo en una cuadrícula de rectángulos. No hay nada más en él.
No hay superposición entre los mosaicos, lo que algunos flujos de trabajo de mapeo quieren. No sangra ni marcas de recorte para imprimir. Sin piezas no rectangulares. No hay recorte automático a un cuadrado antes de la división. No se reensamble, que es el trabajo opuesto y pertenece a La fusión de imágenes, cubierto en su guía.
Si desea un rompecabezas, un mosaico o mosaicos con superposición, esta no es esa herramienta, y vale la pena conocer la brecha antes de comenzar y no después de que lleguen nueve archivos en su carpeta de descargas.
¿Por qué se ejecuta esto en el navegador?
Porque cortar un rectángulo de una imagen es algo Un lienzo lo hace de forma nativa, y un servidor no agrega nada más que una copia de su imagen en el disco de otra persona.
La imagen se decodifica en la pestaña, cada mosaico se dibuja en su propio lienzo, cada lienzo está codificado con toBlob, y la colección se cierra con cremallera y se devuelve. No se sube nada y no se almacena nada.
Las imágenes que se dividieron no siempre son una foto festiva para un feed. Son planos de planta, documentos escaneados, imágenes médicas, capturas de pantalla de sistemas internos, ilustraciones antes de que se publique. Para esos, la alternativa habitual envía la imagen completa a un servicio a cambio de una operación que su propia máquina realiza en una fracción de segundo.
