logo标签列表

如何将图像缓冲数据传递给GraphicsMagic中的gm in()函数

node.jsimagemagickgraphicsmagick
31
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);
})

在这种情况下，我想把缓冲区数据作为输入传递给gm.in()方法。

下面是我参考的链接，但其中使用了图像路径作为输入。 我想使用缓冲区数据作为输入。我该怎么做？

使用Node.js和GraphicsMagick将四个图像拼接在一起

尝试做同样的事情，我想在AWS Lambda上使用复合功能，因此我必须仅使用流来工作。我曾经想过你可以命名流并重复使用它们，但是到目前为止没有成功。 - jgeerts
gm上也有一个名为page的函数--所以不必使用in("-page")，直接将缓冲区传递给page函数即可。我认为这样应该可以。 - treecoder
4个回答
4
如果不修改GraphicsMagick本身的源代码，你是无法做到的。gm模块通过命令行与GraphicsMagick程序交互。通过.in()方法传递的参数将被转换为命令行参数。GraphicsMagick程序仅接受文件名作为该参数，并不会尝试处理任何直接形式的数据。
如果你真的需要在没有文件系统的情况下使其工作，你可以下载GraphicsMagick源代码并更改CLI，以便接受某种形式的数据块，而不是URL作为该参数。
2

实际上，我正在创建一张海报，其中包含两张不同的图片，一张是模板图片“背景”，另一张是带有一些文本的顶部图片。我尝试使用gm，但是图像质量变差了。有人指导我使用缓冲数据作为输入来提高图像质量。我尝试过了，但不知道如何将缓冲数据作为输入传递。因此，我最终决定使用节点子进程和命令字符串。以下是我与您分享的示例代码。

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();
2
这并没有回答问题。你没有使用缓冲数据进行处理，而是使用了一个子进程与现有文件组合。很高兴它对你起作用，但它不适合作为这个问题的答案。 - imjared
1
是的，我同意你的观点。这并不是这个问题的答案。但是我只是分享了我在我的情况下如何解决这个问题。因为作为开发人员，我们必须找到解决方案，可能需要采用不同的方法。 :) - Bharat Bhushan
1
正如另一个回答中所提到的，graphicsmagick不允许缓冲区作为输入。然而有趣的是，它允许HTTP URL作为输入。如果你决定在不修改graphicsmagick源代码的情况下使其工作，请尝试以下操作：

设置

添加uuid模块：

npm install uuid

创建一个全局对象来保存缓冲区：
const magickbuffers = {}

在你的脚本中创建一个http服务器:
const uuid = require('uuid')
const http = require('http')
const magickserver = new http.Server()
const magickport = 9555

magickserver.on('request', (req, res) => {
  res.writeHead(200, { 'Content-Type': 'image/png' })
  if (magickbuffers[req.url]) {
    res.end(magickbuffers[req.url])
  }
  else {
    res.end("\n")
  }
})

magickserver.listen(magickport, () => {})

创建一个原型，提供可用的本地URL，以便graphicsmagick可以在本地服务器上找到缓冲区并将其作为图像传递，并处理缓冲区的存储：
Object.prototype.openBuffer = function() {
  this.id = uuid()
  magickbuffers[`/${this.id}`] = this
  return `http://localhost:${magickport}/${this.id}`
}

创建另一个原型来处理缓冲区的清理，一旦您完全完成了它：
Object.prototype.closeBuffer = function() {
  delete magickbuffers[`/${this.id}`]
  return true
}

用法

旧的例子是想要的，但不能正常工作：

gm()
  .in('-page', '+0+0')
  .in(bufferone) // gm cant use a buffer here, this won't work
  .in('-page', '+50+20')
  .in(buffertwo) // or here
  .mosaic()
  .stream('png', function (err, stdout, stderr) {
    stdout.pipe(writestream)
  })

新的可行方法：
let one = bufferone.openBuffer() 
let two = buffertwo.openBuffer() 
gm()
  .in('-page', '+0+0')
  .in(one) // gm recognizes this because 'one' is a url pointing to the buffer
  .in('-page', '+50+20')
  .in(two)
  .mosaic()
  .stream('png', function (err, stdout, stderr) {
    stdout.pipe(writestream)
    bufferone.closeBuffer() // do this once gm has completely finished using these buffers
    buffertwo.closeBuffer() // don't forget to do this for each buffer manipulated with .openBuffer()
  })
0

我还没有想出如何同时使用图像和水印作为缓冲区，但我已经想出了如何将图像保留为缓冲区：

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

查看这个优秀库中的代码以获取更多信息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接