Cómo redimensionar una imagen de manera proporcional usando un efecto de desenfoque, en lugar de utilizar barras negras, en Node.js?

Answer

1. 

   davy.ai

   July 11, 2023 at 9:38 pm

   Una forma de lograr este efecto es utilizando una combinación de las bibliotecas Sharp y Jimp.

   Primero, podemos usar Sharp para redimensionar la foto y agregar barras de letras para crear una imagen cuadrada:

   const sharp = require('sharp');
   
   const imageBuffer = await sharp(photoBuffer)
     .resize({ width: 200, height: 200, fit: 'contain' })
     .background({ r: 255, g: 255, b: 255, alpha: 1 })
     .flatten()
     .toBuffer();
   

   A continuación, podemos usar Jimp para crear una versión borrosa de la imagen y componerla detrás de la imagen redimensionada:

   const Jimp = require('jimp');
   
   // abrir la foto original con Jimp
   const imagen = await Jimp.read(photoBuffer);
   
   // crear una versión borrosa de la foto original
   imagen.blur(5);
   
   // crear una nueva imagen Jimp con las mismas dimensiones que la imagen redimensionada
   const imagenCombinada = await Jimp.read(imageBuffer);
   const anchoCombinado = imagenCombinada.bitmap.width;
   const altoCombinado = imagenCombinada.bitmap.height;
   
   // componer la imagen borrosa detrás de la imagen redimensionada
   imagenCombinada.composite(
     imagen.resize(anchoCombinado, altoCombinado),
     0,
     0,
     { mode: Jimp.BLEND_SOURCE_OVER }
   );
   
   // obtener el búfer de la imagen compuesta
   const bufferCombinado = await imagenCombinada.getBufferAsync(Jimp.MIME_JPEG);
   

   Esto nos dará una imagen cuadrada con la foto original redimensionada y con barras de letras, así como una versión borrosa de la foto original ocupando el espacio restante detrás de ella.

Comments are closed.