Ticker

6/recent/ticker-posts

Criando um editor de imagens usando JavaScript e HTML5

Considerando o cenário de polarização política em que estamos,  no dia 31/05/2020 surgiram movimentos antifascistas para fazer frente aos protestos antidemocráticos registrados quase que semanalmente no Brasil.

O que isso tem a ver com o JavaScript e HTML5? Bom, junto com as manifestações, uma usuária do Twitter (@beruta) começou a fazer imagens com a bandeira antifascista para quem quisesse, customizando, por exemplo, com o nome da profissão:

Pensando em unir o útil ao agradável, resolvi criar a aplicação disponível aqui, que automatiza a criação das bandeiras. Se você veio aqui para aprender a criar, pode continuar a leitura. Senão, pega a sua bandeira e viva a democracia.


Trabalhando com Canvas no HTML5

Para fazer essa aplicação, nós vamos utilizar o Canvas e suas propriedades de criação e edição de imagens. A edição, neste caso, consiste na inserção de um texto e na alteração das cores da bandeira.

1. Carregando o Canvas e a imagem

Para utilizar o Canvas no HTML5, vamos inserir em nosso body a tag canvas para iniciar um contexto e fazer o carregamento da imagem usando JavaScript:

É no espaço da tag canvas que a imagem será carregada.

Para quem nunca trabalhou com Canvas, é importante entender que ele é baseado em contexto, ou seja, existem metadados em tempo de execução que definem o contexto dos gráficos que você está trabalhando. Estes metadados estarão armazenado na variável ctx que criamos em ctx = c.getContext("2d").

2. Definindo e chamando um render para Canvas

No código anterior, tínhamos uma função callback chamada create que ainda não tinha implementação. Ela está servindo aqui apenas como modularização para chamarmos a função render. Esta função será responsável por realizar as customizações no arquivo .png carregado e permitir o salvamento. As customizações podem ser separadas em quatro etapas: delimitação da área de customização, ajuste de luminosidade, ajuste da saturação e ajuste da matiz de cor. Em forma de código, temos:

  • Definição da área de desenho por cima do contexto da imagem, com altura e largura idênticas às do contexto: ctx.clearRect(0, 0, c.width, c.height);
  • Definição da forma de sobreposição do desenho a ser adicionado à imagem: ctx.globalCompositeOperation. Na especificação do canvas existe uma dezena de valores que podem atribuídos, a depender das customizações a serem feitas pelo usuário. Por exemplo, caso o usuário customize a luminosidade da bandeira, a sobreposição a ser feita irá ajustar o valor de "color-burn". Já no caso de o usuário customizar a saturação, o valor a ser customizado é o "saturation". O mesmo vale para a matiz de cor, definida pelo valor "hue" no mesmo atributo do contexto.
Os valores de cada ajuste (e.g., luminosidade, saturação) são definidos por meio de campos do tipo range e recuperados no JavaScript pelos nomes de cada um. Essa recuperação de valor ocorre por meio do evento oninput atribuído às variáveis relacionadas à cada campo. Ou seja, a cada vez que um campo range é atualizado, a função render é chamada e por sua vez, além dos ajustes na forma de sobreposição da imagem, também atualiza a área de desenho definida para o contexto, por exemplo: ctx.fillStyle = "hsl(0, 50%, " + l + "%)"ctx.fillRect(0, 0, c.width, c.height).

Desta forma, a nossa função render() fica definida assim:


3. Escrevendo na imagem

No gerador de bandeira antifascismo, a grande necessidade era escrever qualquer tipo de categoria antifascista na bandeira. Isso foi feito com a função que implementei inspirado aqui, chamado drawTextAlongArc. Essa função serve para que o texto possa ser escrito em formato de arco, acompanhando o formato da bandeira.

Além disso, outras definições sobre tamanho, tipo de fonte e espaçamento foram feitas. Por fim, utilizamos o método fillText para adicionar o texto customizado (inserido pelo usuário em campo do tipo text) na bandeira.

No trecho de código dessa etapa existe também uma particularidade que adicionei conforme os usuários do gerador foram reportando, por exemplo: permitir o nome "antifascista" no plural. Tem também a atualização da imagem que é feita em toggleImg para permitir a compatibilidade com o navegador Safari, que não possui suporte direto para salvamento da imagem presente no canvas. Foi preciso gerar uma tag img a cada customização realizada:


4. Conclusão

O código final completo dessa aplicação está neste repositório no GitHub. Foi muito legal ver que diversos desenvolvedores quiseram contribuir com o projeto e realizaram forks da aplicação para adequar às suas realidades. Defini o projeto como colaborativo e várias melhorias foram feitas além da implementação original que resultou de uma "brincadeira" durante a madrugada. Vamos em frente!


Postar um comentário

1 Comentários

Ad Code