node.js - node - cómo pasar datos de búfer de imagen a gm en() GraphicsMagic

node js resize image

Question

var buf = require(''fs'').readFileSync(''test.jpg'');

gm().in(''-page'', ''+0+0'').in(buf,''test.jpg'').write(''output.jpg'', function (err) {
     if (err) console.log(err);
})

en este caso, quiero pasar los datos del búfer como entrada al método gm.in() .

A continuación se muestra el enlace al que estoy haciendo referencia, pero en él se utiliza una ruta de imagen como entrada. Quiero usar los datos del búfer como entrada. ¿Cómo puedo hacer esto?

Une cuatro imágenes juntas usando Node.js y GraphicsMagick

Answer 1

En realidad, estaba creando un póster con dos imágenes diferentes, una es la imagen de "fondo" de la plantilla y la segunda es la imagen superior con algo de texto. Lo intenté con gm pero pierdo calidad de imagen. Alguien me guió para usar los datos de Buffer como entrada para mejorar la calidad de la imagen. Lo intenté pero no sé cómo pasar datos de Buffer como entrada. Así que finalmente decidí usar el proceso hijo del nodo con la cadena de comandos. Aquí está el código de ejemplo que estoy compartiendo con usted.

var fs = require(''fs'');

var gm = require("gm");
var exec = require(''child_process'').exec;
var IMAGEFILEPATH = "/images";
var gmcreateImage = function() {

var imageConfig = {"topimage":{"density":"300x300","startx":925,"starty":650,"width":575,"height":825},
 "offers": [
          {"startx": 75, "starty": 850, "msg": "SAVE 5$", "textcolor": "#4f61ac", "font": "Arial Bold", "fontsize":34,"stroke":{"color":"#4f61ac","width":4}},
          {"startx": 75, "starty": 970, "msg": "per gallon", "textcolor": "#4f61ac", "font": "Arial Bold", "fontsize":34,"stroke":{"color":"#4f61ac","width":4}},
          {"startx": 75, "starty": 1150, "msg": "With the purchase of", "textcolor": "black", "font": "Arial", "fontsize":18,"stroke":{"color":"black","width":1}},
          {"startx": 75, "starty": 1260, "msg": "any Pepsi Z0 S2", "textcolor": "black", "font": "Arial", "fontsize":16,"stroke":{"color":"black","width":1}},
          {"startx": 75, "starty": 1370, "msg": "on all flavours", "textcolor": "black", "font": "Arial", "fontsize":16,"stroke":{"color":"black","width":1}},
          {"startx": 75, "starty": 1480, "msg": "Ask for details.", "textcolor": "black", "font": "Arial", "fontsize":18,"stroke":{"color":"black","width":1}}
]};
    var addLast=imageConfig.topimage.last;
    var commandStr = "gm convert ''-page'' ''+0+0'' ''-units'' ''PixelsPerInch'' ''-density'' ''" + imageConfig.topimage.density + "'' ''" + IMAGEFILEPATH+ "/template.jpg'' ";

    var imageActualPosition={};
    imageActualPosition["x"] = imageConfig.topimage.startx;
    imageActualPosition["y"] = imageConfig.topimage.starty;

    if (!addLast) {
        commandStr += " ''-page'' ''+" + imageActualPosition["x"] + "+" + imageActualPosition["y"] + "'' ''" + IMAGEFILEPATH + "/top.jpg'' ";
    }

    var offers = imageConfig.offers;
    for (var i in offers) {
        var color = offers[i].textcolor;
        var startX = offers[i].startx;
        var startY = offers[i].starty;
        var font = offers[i].font;
        var fontSize = offers[i].fontsize;
        var msg = offers[i].msg;
        var offerStr = "";
        if (offers[i].stroke) {
            offerStr += " ''-stroke'' ''" + offers[i].stroke.color + "'' ''-strokewidth'' ''" + offers[i].stroke.width + "''";
        }
        offerStr += " ''-fill'' ''" + color + "'' ''-pointsize'' ''" + fontSize + "'' ''-draw'' ''text " + startX + " " + startY + " /"" + msg + "/"''";
        commandStr += offerStr;
    }
    if (addLast) {
        commandStr += " ''-page'' ''+" + imageActualPosition["x"] + "+" + imageActualPosition["y"] + "'' ''" + IMAGEFILEPATH + "/top.jpg'' ";
    }
    var finalImage="done.jpg";
    commandStr += " ''-mosaic'' ''-quality'' ''100'' ''" + IMAGEFILEPATH + finalImage + "''";
    exec(commandStr, function(err, stdout, stderr) {
            if (err) {
                console.log("Error while executing gm commands" + err);
                return;
            } else {
                console.log("Done See your image");
            }
    })
};
gmcreateImage();

Answer 2

No he descubierto cómo hacerlo con una image y la watermark como búferes, pero he descubierto cómo mantener la imagen como un búfer:

gm(imageBuffer)
    .composite(''./logo_path.png'')
    .geometry(geometry)
    .gravity(''SouthEast'')
    .dissolve(this.options.opacity)
    .toBuffer(function (err, buffer) {
      next(err, buffer, ''image/jpeg'');
    });
};

Echa un vistazo al código en esta gran biblioteca para más información.

Answer 3

Sin modificar la fuente de GraphicsMagick, no puedes. El módulo gm interactúa con el programa GraphicsMagick a través de la línea de comandos. Los argumentos que está pasando a través del método .in() se están convirtiendo en argumentos de línea de comandos. El programa GraphicsMagick solo acepta nombres de archivos para este argumento y no intentará procesar ninguna forma directa de datos.

Si realmente necesita hacer que esto funcione sin el sistema de archivos, siempre puede descargar el código fuente de GraphicsMagick y cambiar la CLI para aceptar algún tipo de blob de datos en lugar de una URL para este argumento.