Uma imagem de 1001 pixels cortada em três não fornece três peças de 333. Ele fornece 333, 334 e 333, e qual bloco obtém o pixel extra decide se a imagem volta a se juntar. A maneira óbvia de escrever isso, dividindo a largura pela contagem e usando esse tamanho para cada ladrilho, reduz 2.333 pixels de uma imagem de 1001 por 667 sem relatar nada. As telhas parecem bem sozinhas. O dano só aparece quando eles estão de volta um ao lado do outro, como uma linha fina da coisa errada na costura, que em uma grade do Instagram de nove peças é o único lugar que todo visitante procura.
tl;dr: Dividir uma imagem é uma decisão aritmética repetida: onde cada corte cai quando a imagem não se divide uniformemente. O cálculo de cada limite de uma única sequência arredondada faz com que a borda direita do bloco N+1 seja a parte esquerda da telha, para que as peças se remontam exatamente. Verificado por hash: uma imagem 1001x667 dividida em nove peças e coladas nas costas produzidas em pixels brutos com o mesmo MD5 do original,
6fc1f790a418dc1ed3ee3d11747f1c20. A abordagem ingênua retira 2.333 pixels da mesma imagem. o divisor de imagens É executado no navegador e devolve um zip.
O que significa dividir uma imagem aqui?
Cortar uma foto em um conjunto de menores que a ladrilham exatamente, sem sobreposição e nada sobrando.
Duas maneiras de dizer o que você quer. Modo de grade Leva várias linhas e colunas, então um 3 por 3 fornece nove peças, independentemente do tamanho da imagem. Modo de tamanho Pega uma largura e uma altura de ladrilhos em pixels, e a grade é, no entanto, que se encaixa, com a coluna da direita e a linha inferior sendo o que resta.
Os trabalhos por trás disso são específicos. Uma grade do Instagram de nove peças de uma foto. Um grande mapa ou pôster quebrado em folhas imprimíveis. Uma folha de sprite cortada em quadros. Um panorama dividido para um posto de carrossel. Em cada uma delas, as peças acabarão novamente adjacentes, e é por isso que as costuras importam mais do que qualquer outra coisa sobre a operação.
Por que uma grade não se divide uniformemente?
Porque as dimensões da imagem são o que a câmera produziu, e três raramente entram nelas.
Os pixels são inteiros, portanto, um corte cai em um limite de pixel ou não existe. Uma imagem cuja largura não é múltipla da contagem de colunas tem um resto que deve ir para algum lugar, e a única questão é onde.
Medido na seqüência que o divisor produz:
| Largura da imagem | cortar em | larguras de telha | soma |
|---|---|---|---|
| 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 |
O restante é espalhado em vez de despejado. Uma imagem de 1000 pixels em três partes fornece 333, 334, 333, não 333, 333, 334, porque cada limite é calculado como round(total * i / count) da mesma seqüência. A diferença é invisível em uma imagem e importa em uma grade, onde um pixel extra na peça final torna a última coluna visivelmente mais ampla que a outra.
Observe a terceira linha. 1001 dividido por 7 é exatamente 143, e muitas dimensões se dividem de forma limpa. A aritmética só se mostra quando não o fazem.
Como você sabe que nada está perdido nas costuras?
Dividindo uma imagem e juntando-a novamente, comparando os pixels em vez de olhar para eles.
Eu gerei uma imagem de 1001 por 667 de ruído determinístico, de modo que cada pixel difere de seus vizinhos e qualquer coluna duplicada ou descartada seja óbvia para um hash. Em seguida, dividi-o em um 3 por 3 usando o plano da ferramenta, extrai cada bloco e colei cada um nas coordenadas de onde veio:
source 1001x667 raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
reassembled 9 tiles raw md5 6fc1f790a418dc1ed3ee3d11747f1c20
idêntico. Não semelhante, não é visualmente indistinguível: os mesmos bytes. Nenhum pixel foi perdido e nenhum foi duplicado.
As peças que o produziram não são todas do mesmo tamanho, que é o ponto:
334x222 333x222 334x222
334x223 333x223 334x223
334x222 333x222 334x222
Nove peças, três larguras diferentes e duas alturas diferentes entre elas, abrangendo 667.667 pixels, o que é exatamente 1001 vezes 667.
Agora a versão ingênua do mesmo trabalho. arranjar floor(1001 / 3) e floor(667 / 3), use 333 por 222 para cada ladrilho e você cobre 999 por 666. Uma tira de dois pixels de largura e um pixel de altura nunca chega a qualquer ladrilho. Isso é 2.333 pixels descartados silenciosamente e, em uma fotografia, é a borda direita da imagem.
Modo de grade ou tamanho de ladrilho fixo?
Grid quando o número de peças importa. Tamanho quando as dimensões de cada peça são importantes.
| você quer | modo | por que |
|---|---|---|
| Nove postagens para uma grade de feed | Grade, 3 x 3 | A contagem é o requisito |
| Um pôster em folhas A4 | Tamanho | O tamanho da folha é o requisito |
| Uma folha de sprite cortada em quadros | Tamanho | O tamanho do quadro é fixo e conhecido |
| Um panorama em um carrossel | Grade, 1 linha | A contagem é o comprimento do carrossel |
Os dois modos discordam sobre as sobras, e essa é a diferença real entre eles. O modo de grade distribui o restante, portanto, cada bloco está dentro de um pixel de cada outro. O modo de tamanho fornece exatamente o tamanho que você pediu e coloca todo o resto na última linha e coluna.
O que acontece com a última linha e coluna no modo tamanho?
Eles saem menores, e isso é deliberado.
Dividir uma imagem de 1000 por 800 em 300 por 300 peças dá uma grade de 4 por 3. Doze peças, das quais seis não são 300 por 300:
r0c3 100x300 r1c3 100x300 r2c3 100x200
r2c0 300x200 r2c1 300x200 r2c2 300x200
Esses cobrem 800.000 pixels, exatamente a fonte. A alternativa seria cortar a imagem para um número inteiro de peças, o que significa jogar fora uma faixa de 100 pixels à direita e uma faixa de 200 pixels na parte inferior. Uma ferramenta que faz isso é decidir que a borda da sua imagem não importa.
Se você deseja peças iguais, use o modo de grade. Se você deseja peças de um determinado tamanho e a imagem não se divide por isso, as peças de borda subdimensionada são a resposta honesta.
Por que os arquivos são denominados R01-C01?
Para que um gerenciador de arquivos ordenado por nome forneça a ordem de leitura, o que não funcionará de outra forma.
A classificação é alfabética, então tile-10 Classifica entre tile-1 e tile-2. Uma grade de doze peças listada dessa maneira se remonta na ordem errada, e qualquer um que trabalhe com os nomes dos arquivos coloca a linha dez onde a linha dois pertence.
Os números são preenchidos na largura do índice maior, portanto, o preenchimento aparece somente quando necessário:
3 x 3 grid shot-r3-c3.png
12 x 12 grid My-Holiday-Photo-r01-c01.png ... My-Holiday-Photo-r12-c12.png
O nome original é mantido, com espaços e qualquer coisa que não seja uma palavra que seja transformada em hífens, então um arquivo que veio de um telefone ainda informa o que era.
PNG ou JPG para as peças?
PNG, a menos que as peças sejam fotografias e o tamanho total seja um problema.
A divisão é sem perdas em si: os pixels em um bloco são os pixels da fonte. Salvar como PNG mantém assim, porque png é um formato sem perdas. Salvar como JPG recodifica cada bloco, o que em uma fotografia que já era JPEG significa uma segunda geração de perdas.
Há uma razão específica para dividir para preferir PNG, além do usual. JPEG se comprime em 8 por 8 blocos, e seus artefatos são mais fortes nas bordas desses blocos. Cada limite de ladrilho é uma nova aresta em um novo arquivo, codificado sem o conhecimento de seu vizinho, de modo que os blocos JPEG podem mostrar uma ligeira descontinuidade exatamente ao longo das costuras que você estava tentando tornar invisível. PNG não tem esse comportamento.
JPG na Qualidade 0,92 é o que a ferramenta escreve quando você a escolhe, o que é um cenário razoável e ainda uma segunda geração. Para nove peças de uma fotografia a caminho de um feed social que irá recomprimi-los de qualquer maneira, é um comércio defensável. Para qualquer coisa sendo impressa ou remontada, png.
Quantas telhas você pode fazer?
Quatrocentos, que é uma grade de 20 por 20, e o limite é sobre o navegador e não a aritmética.
Cada telha se torna sua própria tela e seu próprio blob codificado antes que qualquer coisa seja fechada, então quatrocentas peças significa quatrocentas telas e quatrocentas codificações em uma guia. Após isso, a codificação começa a parar a página em vez de terminar lentamente.
21 x 21 -> That is 441 tiles. The limit is 400, which is a 20 by 20 grid.
Uma segunda verificação pega a outra extremidade. Você não pode cortar uma imagem em mais partes do que pixels ao longo desse eixo, portanto, pedir 80 linhas de uma imagem de 50 pixels de altura é recusado com o tamanho real da imagem, em vez de produzir 30 peças de altura zero.
Será que uma grade de nove peças se alinhará no Instagram?
As peças estarão certas. Se a ilusão funciona é uma questão separada com duas partes.
Primeiro, a forma. Uma grade de alimentação é uma célula quadrada, então uma fonte quadrada dividida 3 por 3 fornece telhas quadradas e tudo combina. Uma fotografia 4:3 dividida 3 por 3 fornece telhas de 4:3, e a alimentação cortará cada uma delas para um quadrado independentemente, o que quebra a imagem. Corte ou preencha a fonte para um quadrado antes de dividir, não depois.
Em segundo lugar, a ordem. Um feed preenche o mais novo primeiro, do canto superior esquerdo, movendo-se para a direita. Portanto, o bloco que você deseja no canto superior esquerdo deve ser o último postado. A ordem de lançamento é o inverso da ordem de leitura: comece com o ladrilho inferior direito e termine com o canto superior esquerdo. Postá-los na ordem em que os arquivos são numerados, coloca a imagem de cabeça para baixo e de trás para a frente.
As costuras também não serão invisíveis, porque a grade traça uma pequena lacuna entre as miniaturas. O efeito é uma imagem vista através de uma janela em vez de uma imagem contínua, que é a aparência de cada postagem de grade e o que as pessoas esperam.
Qual o tamanho das peças para impressão em folhas?
Trabalhe para trás a partir do papel e da resolução da impressora e espere que a soma seja maior que a imagem que você possui.
A4 é 210 por 297 milímetros. Com 300 pontos por polegada, que é o alvo usual para algo que está sendo examinado de perto, ou seja, 2.480 por 3.508 pixels por folha. Um pôster em um 3 por 3 de A4, portanto, deseja uma fonte de 7.440 por 10.524 pixels, que é de 78 megapixels. Uma foto de um telefone recente tem cerca de 12 anos.
Portanto, a versão honesta desse trabalho geralmente tem uma resolução menor que 300 dpi ou menos folhas ou aceitando que a impressão será suave. Com 150 dpi, o mesmo 3 por 3 precisa de 3.720 por 5.262, o que está ao alcance de uma boa câmera. A divisão não pode adicionar detalhes; ele apenas decide onde os cortes caem.
Uma coisa para resolver antes de imprimir e não depois. As impressoras de consumidores não podem imprimir na borda da folha, então cada ladrilho chega com uma margem branca e nove folhas gravadas mostram nove bordas brancas na imagem. A resposta usual é imprimir sem bordas se a impressora suportar ou cortar cada folha ao longo de uma borda e sobrepor-las. Esta ferramenta corta exatamente, sem sangramento e sem sobreposição, então a sobreposição deve vir da fonte: dividir uma grade um pouco maior e aceitar a perda de uma tira ou adicionar o sangramento antes de se dividir.
A divisão perde qualidade?
O corte não. O poder de economia e o redimensionamento que ninguém menciona definitivamente o faz.
Cada bloco é desenhado da imagem de origem em uma tela de tamanho exactamente do tamanho, um pixel de origem para um pixel de destino, sem dimensionamento envolvido. Isso é uma cópia. O teste de hash acima é a prova disso.
Para onde vai a qualidade, é o codificador, coberto acima, e uma coisa totalmente fora dessa ferramenta: em qualquer lugar que você faça o upload, os blocos provavelmente os redimensionarão. Um bloco de 360 por 360 postados em um feed que deseja 1080 por 1080 será ampliado pela plataforma e aumentará o scaling inventos de pixels. Se as peças são destinadas a algum lugar com um tamanho conhecido, divida uma fonte grande o suficiente para que cada ladrilho tenha pelo menos esse tamanho.
Por que o download vem como um zip?
Porque nove arquivos, ou quatrocentos, não são algo que um navegador pode entregar um de cada vez sem lutar.
Uma página que desencadeia vários downloads em sequência é bloqueada pela maioria dos navegadores após a primeira, o que é uma proteção sensata contra uma página que deseja colocar vinte coisas na pasta de downloads. Construindo um silvo Na página e oferecer um arquivo é a sua maneira, ele também mantém as peças juntas com seus nomes intactos, que é a parte que importa para a remontagem.
O arquivo é construído na memória, o que é outro motivo para o teto de quatrocentos blocos: a guia contém a imagem de origem, cada tela de bloco, cada blob codificado e o arquivo finalizado ao mesmo tempo.
O que a divisão não faz
Ele corta um retângulo em uma grade de retângulos. Não há mais nada nele.
Nenhuma sobreposição entre os blocos, que alguns fluxos de trabalho de mapeamento desejam. Sem sangramento ou marcas de corte para impressão. Sem peças não retangulares. Não há corte automático para um quadrado antes da divisão. Nenhuma remontagem, que é o trabalho oposto e pertence a A fusão de imagens, coberto de seu guia.
Se você deseja um quebra-cabeça, um mosaico ou blocos com sobreposição, essa não é a ferramenta, e vale a pena saber a lacuna antes de você começar e não depois de nove arquivos chegarem à sua pasta de downloads.
Por que isso funciona no navegador?
Porque cortar um retângulo de uma imagem é algo Uma tela faz nativamentee um servidor acrescenta nada além de uma cópia da sua imagem no disco de outra pessoa.
A imagem é decodificada na guia, cada bloco é desenhado em sua própria tela, cada tela é codificada com toBlob, e a coleção é fechada e devolvida. Nada é carregado e nada é armazenado.
As imagens que as pessoas dividem nem sempre são uma foto de feriado para um feed. São plantas baixas, documentos digitalizados, imagens médicas, capturas de tela de sistemas internos, obras de arte antes de serem publicados. Para aqueles, a alternativa usual envia a imagem inteira para um serviço em troca de uma operação que sua máquina executa em uma fração de segundo.
