Trabajar con im谩genes en Node.js – GraphicsMagick e ImageMagick

    Introducci贸n

    A medida que las im谩genes se han convertido en una parte integral de la web, la necesidad de procesamiento de im谩genes se vuelve siempre presente. Hay varias bibliotecas y binarios que se utilizan para el procesamiento de im谩genes en Node.js, dos de los cuales son Gr谩ficosMagia y ImageMagick.

    ImageMagick es un software de procesamiento de im谩genes de c贸digo abierto para crear, modificar y convertir im谩genes. GraphicsMagick es una herramienta similar que originalmente era una bifurcaci贸n del proyecto ImageMagick que se ha convertido en un proyecto independiente con varias mejoras.

    Algunas de las ventajas que GraphicsMagick tiene sobre ImageMagick incluyen m谩s eficiencia, un tama帽o m谩s peque帽o, menos vulnerabilidades de seguridad y, en general, es m谩s estable que ImageMagick. Ambos est谩n disponibles para su uso en Node.js como paquetes NPM: GraphicsMagick e ImageMagick.

    Instalaci贸n de GraphicsMagick e ImageMagick

    Antes de instalar cualquiera de estos paquetes, debe descargar e instalar las herramientas de la interfaz de l铆nea de comandos (CLI) en su sistema. Tambi茅n puede utilizar ImageMagick directamente desde GraphicsMagick.

    Si planea usar el m贸dulo GraphicsMagick, puede instalar las herramientas CLI ImageMagick o GraphicsMagick. Si, en cambio, desea utilizar ImageMagick, debe instalar la herramienta CLI de ImageMagick.

    Despu茅s de descargar e instalar la herramienta CLI requerida, puede verificar la versi贸n de su instalaci贸n ejecutando los siguientes comandos en su terminal.

    Para ImageMagick:

    $ convert -version
    

    Si se ha instalado correctamente, esto imprimir谩 los detalles del software instalado en el terminal.

    Para GraphicsMagick:

    $ gm convert logo: logo.miff
    $ gm convert logo.miff win:
    

    Del mismo modo, si la instalaci贸n se realiz贸 correctamente, se mostrar谩 el logotipo de GraphicsMagick en una ventana.

    A continuaci贸n, para agregar el m贸dulo a su proyecto, usaremos npm.

    Para ImageMagick:

    $ npm install imagemagick
    

    Para GraphicsMagick:

    $ npm install gm
    

    Procesamiento de im谩genes en Node.js con GraphicsMagick

    En este tutorial, aprenderemos a trabajar con im谩genes en Node.js usando GraphicsMagick e ImageMagick. En esta secci贸n, comenzaremos con GraphicsMagick.

    Crea una carpeta llamada node-graphics-magick, cd en la carpeta, inicialice el proyecto Node con la configuraci贸n predeterminada e instale GraphicsMagick como se muestra a continuaci贸n:

    $ mkdir node-graphics-magick
    $ cd node-graphics-magick
    $ npm init -y
    $ npm install gm
    

    A continuaci贸n, abra la carpeta con su editor de c贸digo favorito y cree un index.js archivo. Para usar el m贸dulo en el proyecto, imp贸rtelo usando require(). Tambi茅n agregaremos el sistema de archivos nativo (fs) m贸dulo para ayudarnos a interactuar con el sistema de archivos:

    const fs = require('fs');
    const gm = require('gm');
    

    Tambi茅n desea agregar una imagen a su carpeta que se usar谩 en este tutorial, la nombraremos sample_image.

    Como se mencion贸 anteriormente, el m贸dulo GraphicsMagick tambi茅n le permite usar ImageMagick. Si desea utilizar esta opci贸n, deber谩 importar la subclase:

    const gm = require('gm').subClass({imageMagick: true});
    

    Llamar al constructor gm

    Hay tres formas en las que puede llamar al gm m茅todo constructor.

    • Pasando la ruta a la imagen como un argumento de cadena:
    const gm = require('gm');
    
    gm('sample_image');
    
    • Tambi茅n puede pasar un ReadableStream o Buffer como primer argumento, con un nombre de archivo opcional para la inferencia de formato:
    const gm = require('gm');
    
    // ReadableStream
    let readableImageFileStream = fs.createReadStream('sample_image1.jpeg');
    gm(readableImageFileStream, sample_image);
    
    // Buffer
    let imageFileBuffer = fs.readFileSync('sample_image1.jpeg');
    gm(imageFileBuffer);
    
    • Otra opci贸n es pasar dos enteros para width y height con un color de fondo opcional para crear una nueva imagen sobre la marcha:
    const gm = require('gm');
    
    gm(300, 300, "#00ff55aa");
    

    Obtener informaci贸n de la imagen

    GraphicsMagick proporciona varios captadores para recuperar informaci贸n sobre im谩genes. Uno es el identify() m茅todo. Devuelve todos los datos de imagen disponibles:

    const gm = require('gm');
    
    gm("sample_image.jpg").identify(function(err, value) {
        console.log(value);
    
        if(err) {
            console.log(err);
        }
    });
    

    Despu茅s de incluir el gm m贸dulo, llamamos al gm() constructor y luego llam贸 al identify() funci贸n pasando una funci贸n que toma dos argumentos – err para obtener cualquier error que ocurra y value que contiene la informaci贸n de la imagen.

    Estamos imprimiendo el value a nuestra consola y verificando si hay alg煤n error. Si ocurri贸 un error, se registrar谩 en la consola. Puede usar ese bloque para detectar errores y mostrar mensajes apropiados en situaciones de la vida real.

    Tenga en cuenta que el valor podr铆a ser undefined.

    La ejecuci贸n de este c贸digo devolver谩 un objeto con todos los datos de imagen disponibles para la imagen. As铆 es como se ve la salida para una imagen que usamos:

    {
      Format: 'JPEG (Joint Photographic Experts Group JFIF format)',
      format: 'JPEG',
      Geometry: '213x133',
      size: { width: 213, height: 133 },
      Class: 'DirectClass',
      Type: 'true color',
      Depth: '8 bits-per-pixel component',
      ...
      Signature: 'ae5b5e492457ac667e9a4cb1e7b78b7e6459fbf342ea741857ee4e9e1092ad73',
      Tainted: 'False',
      path: 'sample_image.jpg'
    }
    

    Proporciona informaci贸n sobre el size, resolution, file size y color de la imagen depth Entre otros. Si desea obtener algunos de estos detalles individualmente, hay una funci贸n separada para obtenerlos, como: size(), format(), depth(), orientation(), res()etc.

    Todos tienen la misma sintaxis que el identify() funci贸n. Por ejemplo, si quisi茅ramos recuperar el tama帽o de una imagen, usar铆amos:

    const gm = require('gm');
    
    gm("sample_image.png").size(function(err, value) {
        console.log(value);
        if(err) {
            console.log(err);
        }
    });
    

    Cambiar el tama帽o de las im谩genes

    Tambi茅n es com煤n cambiar el tama帽o de las im谩genes. La sintaxis de resize() funciones es:

    resize(width, [, height [, options]])
    

    Donde el height y options los par谩metros son opcionales. los options el par谩metro puede ser %, @, !, < o >. Cubriremos cada uno de estos.

    los width y height especificados son los valores m谩ximos permitidos para ambas propiedades.

    Sin especificar ninguna options, GraphicsMagick mantendr谩 la relaci贸n de aspecto de la imagen original. Si ambos width y height se dan, la imagen se redimensionar谩 hasta que alcance el valor m谩ximo para uno u otro.

    Sin embargo, puede forzar que el m贸dulo cambie de tama帽o al width y height usando el ! opci贸n.

    Tambi茅n usamos el write() funci贸n para guardar la salida en un nuevo archivo.

    Cambiar el tama帽o de una imagen a una width manteniendo la relaci贸n de aspecto:

    const gm = require('gm');
    
    gm("sample_image.jpg")
        .resize(200)
        .write('resized_img_width_only.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
    

    Tambi茅n podemos cambiar el tama帽o de una imagen hasta que alcance el m谩ximo width o height manteniendo la raci贸n de aspecto:

    const gm = require('gm');
    
    gm("sample_image.jpg")
        .resize(200, 200)
        .write('resized_img_widthandheight.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        })
    

    O podemos cambiar el tama帽o de una imagen para que se ajuste al width y height, posiblemente cambiando la relaci贸n de aspecto original:

    const gm = require('gm');
    
    gm("sample_image.jpg")
        .resize(600, 200, '!')
        .write('resized_to_fit.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
    

    Tambi茅n podemos usar porcentajes en lugar de p铆xeles para cambiar el tama帽o de las im谩genes, es decir, podemos cambiar el tama帽o de la imagen al 50% de su tama帽o original:

    const gm = require('gm');
    
    gm("img.png")
        .resize(50, 50, "%")
        .write('resized_img_percentage.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
    

    Por supuesto, tambi茅n puede dar un porcentaje superior al 100% para agrandar la imagen.

    Otra opci贸n interesante que puedes utilizar es @, que cambia el tama帽o de la imagen de tal manera que ocupa como m谩ximo width*height p铆xeles. Esto significa que si escribe algo como esto:

    const gm = require('gm');
    
    gm("sample_image.jpg")
        .resize(100, 100, "@")
        .write('resized_img_max_area_in_pixels.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
    

    Se cambiar谩 el tama帽o de la imagen para que se ajuste a un 谩rea de 10.000 p铆xeles (100 * 100 = 10.000 p铆xeles). En otras palabras, si multiplicamos el ancho y el alto de la imagen resultante, ser谩 un n煤mero menor o igual a 10.000.

    Ahora tomaremos en el > y < opciones:

    • los > La opci贸n cambia el tama帽o de una imagen solo si el ancho y el alto de la imagen dada son mayor que el dado width y height.
    • los < La opci贸n cambia el tama帽o de una imagen solo si el ancho y el alto de la imagen dada son menor que el dado width y height.
    const gm = require('gm');
    
    // Resize image if image width is greater than 100 and image height is greater than 100
    gm("sample_image.jpg")
        .resize(100, 100, ">")
        .write('resized_img_greater_than_100x100.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
        
    // Resize image if image width is less than 100 and image height is less than 100
    gm("sample_image.jpg")
        .resize(100, 100, "<")
        .write('resized_img_less_than_100x100.jpg', function (err) {
            if(err) console.log(err);
            console.log("Done!")
        });
    

    Conversi贸n de im谩genes de un formato a otro

    Otra cosa com煤n que nos gustar铆a hacer con las im谩genes es convertir una imagen de un formato a otro. Esto se puede hacer de una manera muy sencilla, simplemente cambiando la extensi贸n del archivo a uno de los formatos compatibles:

    const gm = require('gm');
    
    gm("sample_image.jpg")
        .write('sample_image.png', function(err) {
            if(err) console.log(err);
            console.log("Jpg to png!")
        });
    

    Recortar im谩genes

    Adem谩s de cambiar el tama帽o de las im谩genes, es posible que tambi茅n desee recortar im谩genes en su aplicaci贸n. GraphicsMagick tiene un crop() funci贸n y su sintaxis es:

    gm("sample_image.png").crop(width, height, [x, y[, percentage]])
    

    Donde los par谩metros tienen el siguiente significado:

    • width y height son las dimensiones a las que desea recortar la imagen. Estos se tratan como n煤meros de p铆xeles o como porcentajes de la imagen original seg煤n la percentage par谩metro.
    • x y y son par谩metros opcionales y representan las coordenadas de la posici贸n desde donde debe comenzar el recorte. El valor predeterminado es 0 para ambos, lo que significa que el recorte comienza desde la esquina superior izquierda de la imagen.
    • los percentage El par谩metro tambi茅n es opcional y se utiliza para especificar si los valores de la width y height representan porcentajes de las dimensiones o p铆xeles de la imagen. los percentage opci贸n por defecto es false.
    const gm = require('gm');
    
    // Crop image to 100x100 at position 20, 20
    gm("sample_image.jpg")
        .crop(100, 100, 20, 20)
        .write('resized_img_crop.jpg', function (err, value) {
            if(err) console.log(err);
            console.log(value);
        });
        
    
    // Crop image to 50% if both width and height at position 10, 10 
    gm("sample_image.jpg")
        .crop(50, 50, 10, 10, true)
        .write('resized_img_crop1.jpg', function (err, value) {
            if(err) console.log(err);
            console.log(value);
        });
    

    Nuevamente, si verifica las dimensiones de la nueva imagen resized_img_crop1, puede ver que tiene la mitad del tama帽o de la imagen original y est谩 recortada en una posici贸n particular en lugar de desde la esquina superior izquierda.

    La siguiente imagen muestra un ejemplo:

    Hemos echado un vistazo a c贸mo realizar la manipulaci贸n de im谩genes con GraphicsMagick. A continuaci贸n, veremos c贸mo hacerlo en ImageMagick.

    Procesamiento de im谩genes en Node.js con ImageMagick

    El m贸dulo ImageMagick no se ha mantenido durante alg煤n tiempo y los desarrolladores incluso aconsejan usar el m贸dulo GraphicsMagick en su lugar. Sin embargo, para este tutorial, tambi茅n veremos brevemente algunas de las funciones principales de este m贸dulo.

    Crea una carpeta llamada node-image-magick siguiendo los pasos de la secci贸n anterior, instale el m贸dulo ImageMagick a trav茅s de npm y crea un index.js archivo.

    En el index.js archivo, agregue el m贸dulo usando require():

    const im = require('image-magick');
    

    Obtener informaci贸n de la imagen

    Para obtener informaci贸n de la imagen, hay una identify() m茅todo en el image-magick m贸dulo tambi茅n. El primer argumento es la ruta a la imagen y el segundo es una funci贸n de devoluci贸n de llamada que tiene dos argumentos: err para manejar errores y info para recuperar la informaci贸n de la imagen:

    const im = require('image-magick');
    
    im.identify('sample_image.jpg', function (err, info) {
        if(err) console.log(err);
        console.log(info);
    });
    

    Ejecutando este c贸digo para nuestra imagen se imprime:

    {
      format: 'JPEG',
      'mime type': 'image/jpeg',
      class: 'DirectClass',
      geometry: '213x133+0+0',
      units: 'Undefined',
      colorspace: 'sRGB',
      type: 'TrueColor',
      'base type': 'Undefined',
      endianess: 'Undefined',
      depth: 8,
      'channel depth': { red: '8-bit', green: '8-bit', blue: '8-bit' },
      ...
      width: 213,
      height: 133
    }
    

    Cambiar el tama帽o de las im谩genes

    ImageMagick proporciona una funci贸n conveniente para cambiar el tama帽o de las im谩genes que incluye un objeto con opciones para cambiar el tama帽o de la imagen y una funci贸n de devoluci贸n de llamada. El cambio de tama帽o de las im谩genes mediante el m贸dulo ImageMagick sigue la siguiente sintaxis:

    const im = require('image-magick');
    
    im.resize({
        srcPath: 'sample_image.jpg',
        dstPath: 'sample_image_resized.jpg',
        width:   256
      }, function(err, stdout, stderr){
           if (err) throw err;
           console.log('resized');
    });
    

    Recortar im谩genes

    ImageMagick tambi茅n proporciona una funci贸n para recortar im谩genes con la misma sintaxis que resize() funci贸n. Echemos un vistazo a un ejemplo de uso simple:

    const im = require('image-magick');
    
    im.crop({
        srcPath: 'sample_image.jpg',
        dstPath: 'sample_image_cropped.jpg',
        width: 800,
        height: 600,
        quality: 1,
        gravity: "North"
      }, function(err, stdout, stderr){
           if(err) console.log(err);
    });
    

    La documentaci贸n proporciona una lista de las opciones para cada una de las funciones anteriores.

    Conclusi贸n

    En este art铆culo exploramos c贸mo trabajar con im谩genes en Node.js usando los m贸dulos ImageMagick y GraphicsMagick. GraphicsMagick es la mejor opci贸n de las dos, dadas todas las ventajas que tiene sobre ImageMagick.

    El m贸dulo GraphicsMagick tiene una amplia documentaci贸n sobre m谩s opciones para manipular im谩genes.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *