Processando imagens com Node.js utilizando o Sharp

[mauricio.miranda]

Processamento digital de imagens é o nome que se dá a qualquer forma de processamento de dados no qual a entrada e saída são imagens, ou seja é a forma com um computador manipula os aruivos de imagens.

No Node.js existe uma biblioteca chamada sharp que consegue manipular facilmente imagens, neste post iremos falar sobre ela e demonstrar o redimensionamento de uma imagem através de um script simples.

A ferramenta sharp pode ser usada para converter imagens em diferentes formatos, redimensionar, extrair informações, composição de imagens e correção gama. Uma novidade é que sistemas operacionais modernos que executam Node.js >= 14.15.0 não necessitam de nenhuma instalação adicional ou dependência.

Instalação

Para installar a dependência bastar rodar o comando:

npm install sharp

Crie uma pasta e dentro crie um arquivo com o nome index.js

 

Extraindo Informações

Para extrair informações de uma imagem basta  adicionar o seguinte código no arquivo index.js:

const sharp = require("sharp");

const process = async (img) => {
  const metadata = await getMetadata(img);
  console.log(metadata);

};

const img = "./assets/imgs/sammy.png";

process(img);

 depois é só rodar o comando na raiz do projeto: 

node index.js

lembrando que na raiz eu criei a pasta assets dentro dela a pasta imgs e dentro de imgs coloquei uma imagem chamada sammy.png

a saída após rodar o script foi:

Como podemos ver, ela apresenta um objeto com informações sobre a imagem como formato, altura e largura.

 

Redimensionando Imagens

para redimensionar é bem simples também basta usar o seguinte código:

const sharp = require("sharp");

const process = async (img, imgOut, newWidth, newHeight) => {
  const metadata = await getMetadata(img);
  
  resizeImage(img, imgOut, metadata.format, newWidth, newHeight);

};

async function getMetadata(img) {
  try {
    return await sharp(img).metadata();
  } catch (error) {
    console.log(`An error occurred during processing: ${error}`);
  }

  return null;
}

async function resizeImage( img, imgOut, format, width, height ) {
  try {
    await sharp(img)
      .resize({
        width: width,
        height: height
      })
      .toFile(`${imgOut}-${width}-${height}.${format}`);
  } catch (error) {
    console.log(error);
  }
}

const img = "./assets/imgs/sammy.png";

const imgOut = "sammy-resized";

process(img, imgOut, 100, 100);

 

Veja que para redimensionar foi criada a função resizeImage que recebe como parâmetros o caminho da imagem a ser redimensionada (img), o caminho da imagem que será gerada redimensionada a partir da original (imgOut), o formato de saída (format), a nova largura (width) e a nova altura (height). Dentro da função chamamos o sharp com o caminho da imagem original com o método resize para atribuir as novas dimensões junto com a função toFile que recebe o nome da nova imagem a ser salva nesse caso foi escolhido o novo nome concatenado com as novas dimensões e junto com o formato da imagem original.

 

Conclusão

Como podemos ver, quando precisar de uma ferramenta para processar sua imagens e gerar novas manipuladas e com alguns efeitos, utilize o sharp uma ferramenta rápida e leve.

 

Referências

• https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp
• https://www.npmjs.com/package/sharp