Imagens e fotos · Editor de imagens e desenhos do navegador
Como funciona o corte em um editor de imagens de navegador: tela e pixels
· Como funciona
edição de imagem tela processamento do navegador
O corte parece trivial, mas um editor de navegador precisa decodificar o arquivo, copiar um retângulo de pixels em uma tela e codificar um arquivo totalmente novo. Esta postagem percorre cada etapa e explica o que muda e o que permanece idêntico.
Por que uma foto recortada é um arquivo novo, não um arquivo antigo recortado - o corte não pode simplesmente excluir bytes de um JPEG ou PNG, então o editor decodifica e recodifica
Um JPEG armazena dados de imagem compactados, e não um intervalo de bytes excluível independentemente por linha visível. Cortar bytes no final corromperia o arquivo, e não cortaria uma fotografia. Um editor de navegador decodifica a imagem, seleciona um retângulo e cria um novo arquivo codificado. O original permanece no seu disco. Se precisar de edição reversível, mantenha as coordenadas de origem e de seleção: o corte exportado não contém os pixels ausentes.
Decodificando a imagem em um bitmap — como o navegador transforma bytes compactados em uma grade largura x altura de RGBA pixels antes que qualquer coisa possa ser selecionada
O navegador transforma o JPEG, PNG ou WebP compactado em um bitmap com amostras de largura x altura. Uma imagem 4000×3000 representa doze milhões de pixels antes de qualquer corte, e vários bytes por pixel podem tornar seu espaço na memória muito maior do que o arquivo no disco. ToolAcre verifica os limites de imagens e telas antes de alocar espaços de trabalho muito grandes. O que você vê na tela pode ser ampliado para caber na janela de visualização; o retângulo de corte ainda deve ser mapeado de volta às coordenadas da imagem antes que os pixels sejam copiados.
Selecionando um retângulo: coordenadas de origem e destino — como drawImage copia uma região escolhida em uma tela do tamanho de destino e o que significa arredondar para pixels inteiros
Um retângulo é uma origem (x,y) mais largura e altura, medidas em pixels de origem. ToolAcre restringe esse retângulo aos limites do documento e corta todas as camadas visíveis, não apenas uma captura de tela da visualização composta. Para cada camada ele cria uma tela de destino e chama drawImage com nove argumentos: tela de origem, retângulo de origem, origem de destino e tamanho de destino. Com dimensões de origem e destino iguais, os pixels são selecionados sem uma etapa de redimensionamento. As posições fracionárias do ponteiro são arredondadas ou fixadas em pixels representáveis da tela.
Codificando o resultado de volta em um arquivo — por que a etapa de exportação decide o formato e a qualidade e por que o corte em si é exato, enquanto a codificação pode não ser
A exportação é uma operação separada da colheita. A tela editada pode ser codificada como PNG, JPEG ou WebP dependendo das opções e do suporte do navegador. PNG pode preservar os pixels fornecidos ao seu codificador sem perdas; JPEG desperdiça alguns detalhes mesmo que o retângulo tenha sido selecionado exatamente, e a transparência precisa de um plano de fundo deliberado ao usar um formato sem alfa. O novo arquivo também pode omitir metadados de origem ou informações de cores, portanto, nunca o descreva como um subconjunto byte por byte do original.
Exemplo resolvido: cortar uma foto 4000×3000 em um banner 1600×900 — seguindo a contagem de pixels através da decodificação, cópia e exportação
Para um blogueiro com uma foto 4000×3000, um banner 1600×900 centralizado começa em x=1200 e y=1050. drawImage copia colunas 1200 a 2799 e linhas 1050 a 1949 para uma saída 1600×900: 1.44 milhões de pixels em vez de doze milhões. Se, em vez disso, você pedir ao editor para reduzir a fotografia inteira para 1600×900, você alterará sua proporção e fará uma nova amostra em vez de fazer esse corte. Em um telefone com memória limitada, o editor pode reduzir primeiro uma entrada muito grande; portanto, verifique as dimensões exibidas antes de repetir essas coordenadas.
O que uma colheita exportada não consegue recuperar da imagem original
Este não é um corte de bloco JPEG sem perdas: o aplicativo desenha pixels e exporta um novo contêiner. O arquivo 1600×900 exportado também não pode recuperar as margens descartadas após você fechar o original. Um documento de edição em camadas é diferente novamente: o corte atua nas camadas do documento, enquanto a exportação as compõe na imagem baixada. Para materiais sensíveis, cortar uma margem é mais seguro do que simplesmente desenhar uma sobreposição opaca, mas inspecione os pixels exportados e mantenha o original privado.
Conclusão: pixels exatos, novo contêiner — por que um corte do navegador é preciso e como o Editor de imagem e desenho do navegador o executa sem carregar o arquivo
Um recorte do navegador é preciso sobre quais pixels decodificados manter, enquanto o codificador escolhido controla o arquivo baixado. O Editor de imagens e desenhos do navegador executa as duas etapas no seu dispositivo: carregar uma imagem, selecionar um retângulo, aplicar o corte e exportar. A rede não precisa dos bytes da foto para nenhuma das etapas, mas os recursos do site e as solicitações divulgadas do AdSense/analytics não devem ser confundidas com o upload de um arquivo no DevTools.