Dividir imagem em grades, blocos e quadros de sprite

01

Como dividir imagem em blocos exatos

dividir imagem — Confira cada corte antes de criar os arquivos

Escolha linhas e colunas quando a grade final for mais importante. Ao dividir imagem, a ferramenta reparte a área útil de forma uniforme e distribui pixels restantes sem lacunas. Os atalhos criam metades, quartos e uma grade 3 por 3; valores personalizados chegam a 20 por 20.

Escolha tamanho exato quando um sistema, impressão ou folha de sprites já definir dimensões. A ferramenta começa depois da margem, avança pelo tamanho mais espaçamento e preserva um último bloco menor se houver sobra.

A prévia numerada liga cada retângulo ao nome de saída. A ordem normal começa no alto à esquerda; a inversa dá o número 01 ao canto inferior direito. Baixe um bloco para conferir ou gere o ZIP completo.

• dividir imagem — 2 por 1 cria metades esquerda e direita.
• dividir imagem — 1 por 2 cria metades superior e inferior.
• dividir imagem — 3 por 3 cria nove painéis iguais.
• dividir imagem — Tamanho exato atende quadros de sprite.

02

dividir imagem — Escolher grade ou tamanho exato

dividir imagem — Cada corte mapeia pixels da origem

Ao dividir imagem, o cálculo usa largura e altura intrínsecas. A grade subtrai margem e espaços e reparte o restante. O tamanho exato avança pelas dimensões escolhidas e preserva a borda restante. Prévia e exportação usam o mesmo plano.

03

dividir imagem — Manter a imagem privada

dividir imagem — APIs locais evitam envio

A ferramenta recebe um File local, decodifica com createImageBitmap() e copia cada retângulo com drawImage() para um Canvas temporário. Não há pedido de upload ou projeto remoto. Limpar fecha o bitmap e revoga a URL local.

04

dividir imagem — Exportar um bloco ou ZIP

dividir imagem — Formato, qualidade e nomes explícitos

Você pode dividir imagem para PNG, JPEG ou WebP. PNG atende texto e transparência, JPEG atende fotos e WebP atende destinos compatíveis. Um bloco codifica só um retângulo; o ZIP codifica todo o plano com nomes numerados.

05

dividir imagem — Como a ferramenta é verificada

dividir imagem — Referências oficiais e testes reproduzíveis

A verificação usa imagens coloridas de dimensões conhecidas, testa grade e tamanho exato, margem e espaço, compara coordenadas, reabre dimensões e inspeciona o ZIP. O código também é verificado para excluir primitivas de rede.

06

dividir imagem — Usar um criador de folhas de sprites sem software complexo

dividir imagem — Ordene, defina a célula, teste o movimento e exporte

dividir imagem — Adicione quadros na ordem de reprodução. Mover ou excluir muda a prévia e o índice dos metadados. Uma faixa serve para loops curtos; a grade evita uma textura muito larga.

dividir imagem — Largura e altura definem a célula. Conter preserva a fonte, Cobrir preenche e recorta, Esticar força o tamanho. O espaço separa células e a margem envolve o atlas; ambos entram em x e y.

dividir imagem — Gere antes de copiar. Se o atlas ultrapassar um limite seguro, imagem e coordenadas são reduzidas juntas. O CSS ou JSON descreve exatamente o arquivo salvo.

07

dividir imagem — Escolha as dimensões do atlas

dividir imagem — Células, espaços e margem determinam coordenadas

dividir imagem — O criador de folhas de sprites deixa a geometria verificável. Colunas definem as quebras de linha; faixas fixam uma linha ou coluna. Cada origem começa depois da margem e avança o tamanho do quadro mais o espaço. Se o Canvas precisar ser reduzido, imagem e coordenadas recebem a mesma escala final.

08

dividir imagem — Mantenha a arte privada no navegador

dividir imagem — APIs locais evitam envio para processamento

dividir imagem — Os arquivos escolhidos são decodificados com createImageBitmap() e desenhados em um Canvas local. Miniaturas usam endereços blob criados pelo navegador. Não existe endpoint de upload, conta ou projeto na nuvem; limpar fecha bitmaps e revoga prévias sem alterar os arquivos originais.

09

dividir imagem — Exporte para CSS ou um motor de jogo

dividir imagem — Os formatos descrevem o mesmo atlas

dividir imagem — O array JSON preserva a ordem, enquanto o objeto JSON permite busca por nome. O CSS cria uma regra de fundo comum e uma classe por quadro com deslocamentos background-position negativos. PNG mantém alfa; WebP oferece qualidade ajustável. Todos os valores descrevem exatamente o atlas exportado.

10

dividir imagem — Como verificar a saída

dividir imagem — Especificações oficiais permitem testes reproduzíveis

dividir imagem — A verificação combina documentação oficial e testes reproduzíveis. MDN descreve drawImage() e toBlob(); W3C define background-position. Os testes carregam cores com tamanhos e alfa diferentes, mudam a ordem, conferem retângulos, exportam WebP, releem suas dimensões e inspecionam a rede para separar recursos estáticos de blobs locais.

11

dividir imagem — Um fluxo prático para juntar imagens

dividir imagem — De arquivos separados para uma composição previsível

dividir imagem — Comece pela sequência. A fila define a ordem final e permite mover ou remover uma cópia de trabalho sem alterar o original. Horizontal compara, vertical mostra etapas, grade organiza coleções e a costura inteligente une capturas consecutivas.