Guia de Colagem de Imagens

Combine várias imagens em colagens de grade, forma livre ou estilo revista. Ajuste espaçamento, bordas, cor de fundo e proporção. Toda operação é executada localmente no seu navegador — sem uploads para qualquer servidor.

O que você precisa

Navegador — Chrome, Firefox, Safari ou Edge com suporte a OffscreenCanvas Formatos — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP ou TIFF Limite — 20 MB por arquivo (qualquer arquivo que exceda 20 MB será rejeitado) Conta — Não é necessária Internet — Não é necessária após o carregamento da página

Criando sua colagem

Abra o Image Collage no seu navegador. Arraste vários arquivos de imagem do seu gerenciador de arquivos e solte-os na zona de upload. Alternativamente, clique na área de upload para selecionar vários arquivos do seu dispositivo.

Cada arquivo deve estar abaixo do limite de 20 MB — arquivos que excederem esse limite serão rejeitados. Escolha o seu tipo de layout: grade, forma livre ou revista. A grade organiza as imagens em linhas e colunas uniformes.

A forma livre permite arrastar e posicionar cada imagem em qualquer lugar da tela. O estilo revista aplica um design editorial com tamanhos e posições variados. Defina a cor de fundo usando o seletor de cores.

Ajuste o espaçamento entre as imagens usando o controle deslizante. Adicione bordas definindo a largura e a cor. Para layouts de grade, escolha o número de colunas.

Para layouts de revista, ajuste a proporção da tela. Clique no botão gerar. A API OffscreenCanvas compõe todas as imagens em uma única tela.

O libvips posiciona cada imagem de acordo com a sua seleção de layout, aplica espaçamento e bordas, e preenche o fundo. Nenhum dado é transmitido pela rede. Assim que a colagem for gerada, um botão de download aparecerá.

Clique nele para salvar a colagem no seu dispositivo. O navegador grava o arquivo diretamente da memória para o disco. Após o download, o libvips libera os buffers de memória temporários automaticamente.

Como funciona

O Image Collage usa a API OffscreenCanvas para compor várias imagens em uma única tela. Quando você faz o upload das imagens, o navegador as lê diretamente na memória — nenhum upload para servidor ocorre.

O libvips calcula as dimensões da tela com base na sua seleção de layout e na contagem de imagens. Para layouts de grade, ele divide a tela em células uniformes calculando as dimensões de linha e coluna a partir do total de imagens e da configuração de colunas, garantindo que cada célula receba uma alocação de pixels igual. Para layouts de forma livre, ele usa um arranjo padrão que você pode modificar arrastando cada imagem para qualquer coordenada da tela.

Para layouts de revista, ele aplica regras editoriais para tamanhos mistos, onde imagens maiores recebem mais área da tela e imagens menores preenchem as lacunas ao redor delas.

Cada imagem é desenhada na tela em sua posição calculada usando a renderização OffscreenCanvas. O libvips aplica espaçamento entre as imagens deixando lacunas de pixels entre os limites das células, adiciona bordas desenhando retângulos com a largura e cor selecionadas, e preenche o fundo usando o valor do seletor de cores como estilo de preenchimento antes que qualquer imagem seja composta.

Após a composição, o libvips converte a tela para uma imagem PNG ou JPEG usando o método toBlob da tela, que codifica os dados de pixel no formato de imagem selecionado. O blob binário resultante é entregue via URL. createObjectURL, criando um ponteiro de referência de memória temporário que o navegador usa para servir o arquivo para download.

Quando o download é concluído, o libvips chama URL. revokeObjectURL para liberar a memória alocada.

Os arquivos são processados inteiramente dentro do seu navegador usando OffscreenCanvas. Eles nunca são enviados para os servidores da ConvertCraft. Seus arquivos originais permanecem no seu dispositivo — o libvips os lê na memória, compõe a colagem e descarta os buffers de pixel após o download.

Quando algo dá errado

Alguns arquivos falham ao carregar: Esses arquivos excedem o limite de 20 MB. O OffscreenCanvas opera dentro de limites rígidos de memória. Processar imagens maiores que 20 MB requer buffers de pixels descompactados massivos na RAM, o que pode travar a aba do navegador.

As imagens parecem distorcidas: O layout da colagem redimensiona as imagens para caber nas células, o que pode distorcer as proporções. Use a opção de proporção original ou ajuste as dimensões das células para corresponder às suas imagens.

A tela é muito grande: Muitas imagens com alta resolução produzem uma tela muito grande. O navegador pode ficar sem memória. Reduza o número de imagens ou use arquivos de origem com resolução menor.

A colagem parece desalinhada: Layouts de grade exigem imagens com dimensões consistentes. Proporções incompatíveis produzem espaçamentos irregulares. Recorte as imagens para dimensões consistentes antes de fazer o upload.

### Quantas imagens posso incluir?

O limite prático depende da memória disponível no seu navegador. O libvips processa imagens sequencialmente para gerenciar as restrições de memória. Se você encontrar lentidão ou travamentos, tente reduzir o número de imagens.

### Posso ajustar as posições individuais das imagens?

Layouts de forma livre permitem arrastar cada imagem para qualquer posição na tela. Layouts de grade e revista usam regras de posicionamento fixas. Mude para o modo de forma livre para controle manual sobre o posicionamento de cada imagem.

### Qual é o formato de arquivo da saída?

A colagem é salva como uma imagem PNG por padrão para qualidade sem perdas. Você pode selecionar JPEG para tamanhos de arquivo menores com compressão com perdas. A seleção de formato está disponível antes do download.