Desenvolvimento

20 mar, 2018

Processamento de imagens em JavaScript

Publicidade

Se você está procurando por uma maneira de processar ou manipular imagens em seu projeto web, pode valer a pena dar uma olhada em algumas das bibliotecas apresentadas nesta publicação. A maioria delas fornece operações básicas, como ajuste de brilho e contraste, escala de cinza e inversão de imagem, enquanto outras se concentram principalmente em código fácil ou extensível. As próximas seções ajudarão você a descobrir qual ferramenta se adapta aos seus requisitos.

Você pode encontrar um snippet de código para ajustar o brilho de uma imagem em cada seção. Isso lhe dará uma ideia de como as bibliotecas podem ser usadas. O resultado em executar o código se parece com isso:

Imagem original e resultado depois de aumentar o brilho (Fonte: flickr.com)

1. Caman JS

Uma biblioteca bem conhecida e poderosa para manipulação de imagens é Caman.js. Ela oferece várias funções incorporadas, bem como a possibilidade de ser ampliada. Além disso, a biblioteca está bem documentada e pode ser usada tanto no NodeJS quanto no navegador.

As funções fornecidas pelo CamanJS funcionam com elementos <canvas>. Então, antes de começar, você mesmo pode criar um elemento Canvas ou permitir que o CamanJS substitua uma imagem por uma canvas com as mesmas dimensões.

As funções básicas cobrem manipulações de cores como ajuste de contraste/brilho ou modificação individual dos canais RGB, bem como a possibilidade de aumentar ou diminuir o ruído aplicado à imagem.

As operações avançadas, por exemplo, trabalhar com camadas, misturando ou recortando uma imagem podem ser alcançadas através de plugins.

Por exemplo, uma documentação detalhada e o download do CamanJS. Confira 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

Como as duas primeiras bibliotecas, glfx.js é uma ferramenta poderosa que oferece uma ampla gama de funções. Além de Filtrr2 e CamanJS, ela funciona com o WebGL. O legal sobre isso é que as operações de processamento de imagem são feitas usando a placa gráfica e, portanto, podem ser executadas em tempo real. A principal desvantagem é que ela só será suportada em navegadores mais recentes.

Além das funções básicas de ajuste e efeitos divertidos, glfx.js oferece uma lista de funções de desfocagem e enrolamento. Estas podem ser ajustadas por diferentes parâmetros para criar resultados exclusivos. Confira o web 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 no web site do projeto, grafi.js é uma biblioteca que deve incentivar os usuários a descobrir como funciona o processamento de imagem. O código-fonte pode ser encontrado no GitHub e contém muitos comentários que facilitam a compreensão do que está acontecendo em cada função.

Se você está procurando por uma biblioteca que pode ser usada para operações de imagem avançadas, o grafi.js pode não atender às suas necessidades, mas ajuda a entender como as manipulações de imagem são implementadas e obtém resultados satisfatórios para as operações básicas.

Observe que as operações que envolvem alterar a orientação ou o 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

Como o CamanJS, Jimp pode ser usada tanto no NodeJS quanto no navegador. Não usa elementos HTML (<img> ou <canvas>), mas lê na imagem para processar a partir de um caminho ou uma url.

Jimp fornece uma lista de funções de ajuste de cores, bem como alguns efeitos. Também oferece algumas operações que você pode perder nas outras bibliotecas, como redimensionar, dimensionar e girar uma imagem. As imagens também podem ser recortadas manualmente ou automaticamente. Usada no Node, Jimp é uma poderosa ferramenta que permite que você execute operações em cadeia em vários arquivos e armazene 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

Filtrr2 é descrito como uma biblioteca “fácil de usar como padrão”, que depende de jQuery. Ela usa elementos <canvas> para processar imagens. Enquanto algumas operações CamanJS não são cobertas pelo Filtrr2, ela oferece algumas funções adicionais, como posterizar ou desfocar uma imagem. Tudo em todas as funções fornecidas e o uso são semelhantes a CamanJS.

Mesmo que a Filtrr2 seja uma biblioteca poderosa, o repositório do GitHub não foi atualizado por enquanto. 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

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

Processing.js permite escrever o código de processamento e simplesmente incluí-lo em seu web site, aplicando-o a um elemento canvas.

Mesmo que a biblioteca ofereça algumas funções úteis, tais como dimensionamento, rotação ou combinação de imagens, as soluções para operações básicas, como greyscaling ou ajustes de cores, devem ser implementadas pelo usuário. No lado positivo, é altamente ajustável e uma ótima maneira de entender os algoritmos de manipulação de imagem.

Muitos exemplos e um tutorial passo a passo para começar podem ser encontrados no web site processing.js.

Visão geral

Para obter uma visão geral das funções fornecidas pelas bibliotecas, veja a tabela a seguir.

Como você pode ver, o CamanJS oferece uma grande variedade de modificações pixelwise, bem como operações que são úteis para correções na imagem. Algumas operações, como desfocagem e nitidez, são suportadas apenas por outras bibliotecas. Então, você terá que escolher, dependendo do que você deseja fazer exatamente.

A única biblioteca nesta lista que suporta a rotação, o deslocamento e o recorte automático é Jimp. Se você quiser apenas redimensionar ou recortar uma imagem, você pode usar CamanJS ou Jimp.

No caso de você estar procurando por mais operações abstratas, glfx.js pode ser a biblioteca a escolher, pois vem com uma lista de efeitos extravagantes com os quais você pode brincar, como você pode ver no quadro a seguir.

Claro, as bibliotecas apresentadas neste artigo não são as únicas que merecem uma análise e você também pode estar interessado em verificar uma destas:

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

***

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: https://blog.webkid.io/image-processing-in-javascript/