Processamento de Imagens em Node.js: redimensionar e cortar com Sharp

Trabalhando com Imagens em Node.js: redimensionar e cortar com Sharp

\n\n

No desenvolvimento web moderno, o processamento de imagens no lado do servidor é uma tarefa comum. O Node.js oferece várias bibliotecas poderosas para trabalhar com gráficos. Neste artigo, vamos explorar detalhadamente a biblioteca Sharp — uma ferramenta rápida e eficiente para redimensionar (resize) e cortar (crop) imagens.

\n\n

Por que Sharp?

\n\n

O Sharp utiliza as bibliotecas nativas libvips, tornando-o uma das soluções mais performáticas para Node.js. Principais vantagens:

\n

\n
• Alta velocidade de processamento (muito mais rápido que alternativas em JavaScript puro)
\n
• Baixo consumo de memória
\n
• Suporte a todos os formatos populares: JPEG, PNG, WebP, AVIF, TIFF
• API simples e intuitiva
• Possibilidade de trabalhar com streams

\n\n

Instalação

\n\n

A instalação do Sharp em um projeto Node.js é feita com um único comando:

\n\n

npm install sharp

\n\n

Após a instalação, a biblioteca está pronta para uso. Certifique-se de que as dependências necessárias para a compilação do módulo nativo estejam instaladas no sistema (geralmente isso acontece automaticamente).

\n\n

Redimensionamento básico (resize)

\n\n

O método resize() permite alterar as dimensões da imagem. Vejamos os principais casos de uso.

\n\n

Exemplo 1: Redimensionamento simples

\n\n

const sharp = require('sharp');\nconst path = require('path');\n\nasync function resizeImage() {\n    try {\n        await sharp('input.jpg')\n            .resize(300, 200) // largura 300px, altura 200px\n            .toFile('output.jpg');\n        console.log('Imagem redimensionada com sucesso');\n    } catch (error) {\n        console.error('Erro:', error);\n    }\n}\n\nresizeImage();

\n\n

Neste exemplo, a imagem será comprimida para as dimensões exatas de 300x200 pixels, o que pode distorcer as proporções.

\n\n

Exemplo 2: Manter proporções

\n\n

async function resizeWithProportions() {\n    await sharp('input.jpg')\n        .resize({\n            width: 400, // apenas largura\n            height: undefined, // altura será calculada automaticamente\n            fit: 'inside' // mantém as proporções\n        })\n        .toFile('output_inside.jpg');\n    \n    console.log('Proporções mantidas');\n}

\n\n

O parâmetro fit aceita vários valores:

\n

\n
• cover — corta a imagem para preencher completamente as dimensões definidas (padrão)
\n
• contain — ajusta a imagem dentro das dimensões definidas, mantendo as proporções
\n
• fill — estica a imagem para as dimensões definidas
\n
• inside — reduz a imagem para caber dentro das dimensões definidas
\n
• outside — aumenta a imagem para ultrapassar as dimensões definidas
\n

\n\n

Corte de imagens (crop)

\n\n

O Sharp oferece duas formas principais de corte: usando o método extract() e através dos parâmetros do resize().

\n\n

Método extract()

\n\n

Permite recortar uma área retangular da imagem com base em coordenadas definidas:

\n\n

async function cropImage() {\n    await sharp('input.jpg')\n        .extract({\n            left: 100,   // margem esquerda\n            top: 50,     // margem superior\n            width: 300,  // largura da área\n            height: 200  // altura da área\n        })\n        .toFile('cropped.jpg');\n    \n    console.log('Corte realizado');\n}

\n\n

Corte automático ao redimensionar

\n\n

Frequentemente é necessário redimensionar e cortar a imagem simultaneamente. Isso é feito com o parâmetro gravity ou position:

\n\n

async function cropAndResize() {\n    await sharp('input.jpg')\n        .resize(200, 200, {\n            fit: 'cover', // corta para preencher exatamente