Editando imagens no seu navegador

Tudo acontece no seu dispositivo

A maioria dos editores de imagens online carrega sua imagem em um servidor, processa-a lá e envia de volta o resultado. Isso significa que uma cópia da sua imagem fica na máquina de outra pessoa, sujeita à política de retenção e segurança dela.

Este editor não funciona dessa maneira. Seu navegador já contém um pipeline de imagens completo: ele pode decodificar um JPEG, entregar os pixels, permitir que você desenhe neles e codificar um novo arquivo. Esta ferramenta é uma interface de usuário nesse pipeline. A imagem é lida do disco para a memória, editada na memória e gravada de volta no disco.

A consequência prática é que a ferramenta funciona offline depois de carregada, não tem limite de upload além da memória do seu dispositivo e não pode vazar sua imagem porque nunca a transmite. Nosso conjunto de testes inclui uma verificação de que nenhum arquivo de origem contém uma chamada de rede, de modo que a reivindicação seja aplicada em vez de meramente declarada.

Iniciando: uma tela em branco ou uma imagem existente

Escolha uma largura e altura para uma tela em branco ou abra PNG, JPEG ou WebP no seu dispositivo. Abrir uma imagem substitui o documento atual, portanto, exporte primeiro tudo o que deseja manter.

Imagens muito grandes são reduzidas automaticamente e a ferramenta informa quando isso é feito. Esta não é uma restrição arbitrária. Uma fotografia de 50 megapixels precisa de cerca de 200 MB pixels brutos em uma tela, e uma segunda cópia para a saída dobra isso. Em um telefone, exceder o limite não gera um erro detectável: o navegador devolve uma tela em branco ou o sistema operacional encerra a guia. Reduzir a imagem primeiro é a diferença entre um editor funcional e uma falha.

Desenhando e por que o toque funciona corretamente aqui

As ferramentas pincel, borracha, linha, retângulo, elipse e texto funcionam da mesma maneira com um mouse, um trackpad, um dedo ou uma caneta, porque o editor escuta eventos de ponteiro unificados em vez de manipuladores separados de mouse e toque.

Um detalhe torna o desenho por toque utilizável em vez de frustrante: a tela declara que lida com seus próprios gestos, então um dedo arrastado sobre ela desenha em vez de rolar a página. Editores que omitem isso são quase inutilizáveis ​​em um telefone, porque cada traço luta contra o navegador pelo controle. A página ainda rola normalmente em qualquer lugar fora da tela.

Os eventos de ponteiro também chegam com menos frequência do que a atualização da tela, portanto, um toque rápido é relatado como um punhado de pontos amplamente espaçados. O editor preenche as lacunas entre eles, e é por isso que uma linha rápida aparece sólida em vez de uma fileira de pontos.

Desfazer e a memória que custa

Cada traço, forma e transformação é uma etapa de desfazer. Desfaça e refaça o trabalho na barra de ferramentas ou com os atalhos de teclado habituais.

A história é limitada de propósito. Cada etapa retém uma cópia dos pixels alterados e em uma imagem grande com dezenas de megabytes por etapa. Um histórico ilimitado é uma das maneiras mais rápidas de esgotar a memória de um telefone, portanto, este editor limita o histórico pelo número de etapas e pelo tamanho total, descartando o mais antigo primeiro. A linha de status mostra quanto está retido atualmente.

Essa é uma troca deliberada: uma história mais superficial em troca de um editor que não morra no meio de uma sessão.

Camadas, mantidas deliberadamente pequenas

As camadas permitem manter uma anotação separada da fotografia abaixo, para que você possa ajustá-la ou removê-la sem tocar nos pixels originais. Você pode adicionar, selecionar, renomear por posição, reordenar, ocultar, definir a opacidade, mesclar e nivelar.

O que está aqui é um pequeno modelo de camada raster, e ele para ali de propósito. Modos de mesclagem, máscaras de camada, grupos, camadas de ajuste e transformações não destrutivas não são implementados. Esses recursos são o que separa uma ferramenta de desenho de um compositor profissional, e uma versão incompleta deles é pior do que sua ausência honesta. A página de limitações lista exatamente o que está faltando.

Cada camada contém um bitmap em tamanho real, portanto as camadas custam memória em proporção direta ao seu número. O limite é doze.

Exportador

PNG não tem perdas e mantém a transparência: a escolha certa para desenhos, diagramas e capturas de tela. JPEG é muito menor para fotografias, mas não consegue armazenar transparência e perde um pouco de qualidade cada vez que é salvo. WebP executa bem ambos os trabalhos e produz arquivos menores que JPEG com qualidade comparável.

Se sua imagem tiver áreas transparentes e você escolher JPEG, o editor avisa antes de salvar e preenche a transparência com branco em vez de deixar o navegador escolher uma cor, que às vezes é preta.

O arquivo exportado é produzido na página e salvo diretamente na sua pasta de downloads.

Questões

Limitações

• As camadas são apenas rasterizadas: sem modos de mesclagem, máscaras, grupos, camadas de ajuste ou transformações não destrutivas.
• Imagens grandes são reduzidas para caber no limite da tela do dispositivo, portanto o editor não é adequado para trabalhos em resolução total em fotografias muito grandes.
• O histórico de desfazer é limitado pelo tamanho e pela contagem de passos, portanto, uma sessão longa não reterá todos os passos.
• Nada é salvo entre as sessões. Fechar a guia descarta o documento.
• Sem suporte para RAW, HEIC, TIFF, GIF ou SVG: o editor lida apenas com PNG, JPEG e WebP.
• Sem gerenciamento de cores. As imagens são tratadas no espaço de cores padrão do navegador, portanto, um perfil ICC incorporado pode não ser preservado.