Nesta série, estamos revivendo alguns dos melhores artigos publicados no Portal iMasters durante o ano de 2017. A ideia é que o material não se perca e você possa relembrá-lo, entrando em 2018 preparado para receber mais conteúdos tão bons quanto esse!

***

Se você está buscando uma maneira de processar ou manipular fotos em seu projeto web, pode valer a pena dar uma olhada em algumas das bibliotecas apresentadas aqui. A maioria delas fornecem operações básicas como o ajuste de brilho e contraste, escala de cinza e inversão e imagem enquanto outros focam principalmente em um código de fácil entendimento ou extensão.

Descubra neste artigo qual ferramenta será adequada aos seus requisitos. Em cada tópico abaixo, você vai encontrar a ferramenta e trechos dos códigos para ajustar o brilho de uma imagem. Isso dará uma ideia para vocês sobre como as bibliotecas podem ser utilizadas. O resultado final parecerá com isso:

1. Caman JS

Uma biblioteca bem conhecida e poderosa para manipulação de imagens é o Caman.js. Ela oferece várias funções embutidas assim como a possibilidade de ser extendida. Ela também é bem documentada e pode ser utilizada tanto no Node.js quanto no navegador.

As funções fornecidas pelo CamanJS funcionam com os elementos de <canvas>, então, antes de começar, vocês podem criar um elemento Canvas você mesmo, ou deixar o CamanJS substituir uma imagem com um Canvas nas mesmas dimensões.

As funções básicas cobrem a manipulação das cores como as configurações de contraste/brilho ou modificar os canais RGB individuais, assim como a possibilidade de aumentar ou reduzir o ruído aplicado à imagem. Operações avançadas como, por exemplo, trabalhar com layers, fazer blend de imagens ou cortes, podem ser atingidos utilizando plugins.

Para exemplos, uma documentação detalhada e baixar o CamanJS, verifique o site oficial.

<img id="caman-image" src="otter.jpg">
<script src="caman.js"></script>
<script>
Caman('#caman-image', function () {
  this.brightness(50).render();
});
</script>

2. glfx.js

Essa é uma ferramenta poderosa que fornece uma grande variedade de funções. Diferente de Filtrr2 e CamanJS, ela funciona com WebGL. A parte boa disso é que as operações de processamento de imagens são realizadas utilizando a placa gráfica e por isso podem ser executadas em tempo real. A principal desvantagem é que ele será suportado somente nos navegadores mais novos.

Além das funções de ajustes básicos e efeitos engraçados, o glfx.js oferece uma lista de funções de envolvimento e desfoque. Eles podem ser ajustados por diferentes parâmetros para criar resultados únicos. Veja o site do projeto para ver uma demonstração e baixar a biblioteca.

<script src="glfx.js"></script>
<script>
window.onload = function () {
    const canvas = fx.canvas();
    const image = document.getElementById('glfx-image');
    const texture = canvas.texture(image);
    canvas.draw(texture).brightnessContrast(0.5, 0).update();
    image.parentNode.insertBefore(canvas, image);
    image.parentNode.removeChild(image);
};
</script>
<img id="glfx-image" src="otter.jpg">

3. Grafi.js

Como diz o site do projeto, o grafi.js é uma biblioteca de que deveria encorajar os usuários a descobrir como o processamento de imagens funciona. O código fonte pode ser encontrado no GitHub, e contém vários comentários que facilitam o entendimento do que está acontecendo em cada função. Se vocês estiverem procurando uma biblioteca que possa ser utilizada para operações avançadas de imagens, grafi.js pode não ser adequado para suas necessidades, mas te ajuda a entender como as manipulações de imagens são implementadas e atinge resultados satisfatórios para operações básicas.

Note que as operações que envolvam mudanças na orientação ou no tamanho da imagem não são fornecidas pelo grafi.js.

<canvas id="grafi-canvas"></canvas>
<script type="text/javascript" src="grafi.js"></script>
<script>
  const grafiCanvas = document.getElementById('grafi-canvas')
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let original, newImage, imageCtx
  let img = new Image()
  img.src = 'otter.jpg';

  img.onload = function () {
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0)
    original = ctx.getImageData(0,0, canvas.width, canvas.height)

    grafiCanvas.width = img.width
    grafiCanvas.height = img.height
    imageCtx = grafiCanvas.getContext('2d')
    imageCtx.putImageData(grafi.brightness(original, {level: 100}), 0, 0)
  }
</script>

4. Jimp

Assim como o CamanJS, o Jimp pode ser utilizado tanto no node.js quanto no navegador. Ele não utiliza elementos HTML (<img> ou <canvas>), mas lê a imagem a ser processada a partir de um caminho ou uma URL.

Jimp fornece uma lista de funções ajustando as cores assim como alguns efeitos. Ele também oferece algumas operações que você poderia perder em outras bibliotecas, como redimensionamento, escala, e rotação das imagens. As fotos podem ser recortadas tanto manualmente quanto automaticamente. Utilizado no Node, o Jimp é uma ferramenta poderosa na qual vamos executar operações em cadeia em múltiplos arquivos e armazenar as imagens modificadas.

<script src="jimp.min.js"></script>
<script>
  Jimp.read('otter.jpg').then(function (lenna) {
    lenna.brightness(0.5)
      .getBase64(Jimp.MIME_JPEG, function (err, src) {
        const img = document.createElement('img');
        img.setAttribute('src', src);
        document.body.appendChild(img);
      });
    }).catch(function (err) {
      console.error(err);
    });
</script>

5. Filtrr2

O Filtrr2 é descrito como uma biblioteca “fácil de utilizar e fora da caixa” que depende do jQuery. Ela utiliza elementos <canvas> para processar imagens. Enquanto algumas operações do CamanJS não estão cobertas pelo Filtrr2, ele oferece funções adicionais como posterização ou desfoque de uma imagem. Contudo, as funções fornecidas e a utilização são similares ao CamanJS.

Mesmo o Filtrr2 sendo uma biblioteca poderosa, o repositório do GitHub não tem sido atualizado há um tempo. O projeto pode ser encontrado aqui.

<script type="text/javascript" src="jquery.min.js"/></script>
<script src="filtrr2.js"></script>

<img id="filtrr2-img" src="otter.jpg"/>
<script>
  Filtrr2('#filtrr2-img', function () {
    this.brighten(50).render();
  });
</script>

6. Processing.js

Essa biblioteca pode ser útil se você estiver familiarizado com linguagem de programação Processing, que permite trabalhar com mídias diferentes e pode ser utilizado para criar animações, visualizações de dados e arte digital, mas também para manipulação de imagens.

Processing.js permite que você escreva código em Processing e simplesmente o inclua em seu site, aplicando a um elemento canvas.

Mesmo que a biblioteca forneça algumas funções úteis, como escalas, rotação, combinação, soluções para operações básicas como escalas de cinza, ajustes de cores tem que ser implementadas pelo usuário. Pelo lado positivo, é altamente ajustável e uma boa maneira de alcançar um entendimento dos algoritmos de manipulação de imagens.

Muitos exemplos e um tutorial passo a passo para iniciar podem ser encontrados no site do processing.js

Resumo

Para ter uma visão geral das funções fornecidas pelas bibliotecas, de uma olhada na tabela abaixo:

 

Como vocês podem ver, o CamanJS oferece uma grande variedade de modificações assim como operações como desfoque e aprimoramento. No entanto, somente são suportados por outras bibliotecas, então você terá que escolher, dependendo do que exatamente você quer fazer.

A única biblioteca nessa lista que suporta rotação, giro e auto-crop é a Jimp. Se você somente quer redimensionar ou cortar uma imagem, você pode utilizar tanto CamanJS como Jimp.

Caso você esteja procurando por operações mais abstratas, glfx.js pode ser a biblioteca a ser escolhida, pois vem com uma lista de efeitos extravagantes que você pode se divertir, como você pode ver gráfico abaixo:

 

É claro, as bibliotecas apresentadas nesse artigo não são as únicas que valem a pena verificar. Você pode se interessar em ver essas:

• PaintbrushJS
• canvasfilters
• VintageJS
• jQuery filter.me
• JSManipulate

 

***

Christine Wiederer faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela Redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://blog.webkid.io/image-processing-in-javascript/