在node . js中使用gm调整大小并合成两个或多个图像

Given two images, say under img (in size of 1024x768) folder (img1.png and img2.png), I need to resize img2 (say 300x300) and put on img1 in x and y (say 100, 200) from top left of img1. The end result should be 1024x768 size image.

给定两个图像，例如img(大小为1024x768)文件夹(img1)。png和img2.png)，我需要调整img2的大小(比如300x300)，并在img1的左上角(比如100,200)设置img1。最终结果应该是1024x768大小的图像。

Using gm (https://github.com/aheckmann/gm), tried this:

使用gm (https://github.com/aheckmann/gm)尝试:

gm('./img/img1.png')
.composite('./img/img2.png')
.geometry('300x300+100+200')
.write('resultGM.png', (err) => {
  if (err) console.log(err);
});

Expectedly (because of chain on whole operation) it produces 300x300 image. Then I tried this:

预期(由于全操作链)产生300x300图像。然后我试着:

gm('./img/img1.png')
.composite(
  gm('./img/img2.png')
  .geometry('300x300+100+200')
)
.write('resultGM.png', (err) => {
  if (err) console.log(err);
});

hoping composite function accepts buffer, but no chance, it only accepts file path, and it gives error. After spending 2-3 hours and reading few posts (only could find some discussions here: How to do composite with gm node.js? and here: Combine two gm objects while resizing one of them in graphicsMagick for NodeJS (this one doesn't answer the question in fact), I couldn't find any solution to do this operation in memory using streams or buffer. It's possible to do while writing to a temporary file. Is there any body out there who could find a solution for in memory resize and merge images on the fly?

希望复合函数接受缓冲区，但没有机会，它只接受文件路径，并给出错误。在花了2-3个小时阅读了很少的文章之后(这里只能找到一些讨论:如何与gm node.js进行复合?)这里:合并两个gm对象，同时在graphicsMagick中为NodeJS调整其中一个对象的大小(实际上这个对象没有回答这个问题)，我无法找到任何解决方案来使用流或缓冲区在内存中执行此操作。在写入临时文件时，可以做到这一点。有没有人能在内存中找到一个解决方案，在动态调整和合并图像?

2 个解决方案

#1

Using ImageMagick instead of GraphicMagic;

使用ImageMagick而不是GraphicMagic;

After a few hours of searching finally i have figured out how to merge two images resizing and re-ordering layer positions (over, under, etc.) using gm.

经过几个小时的搜索，我终于找到了如何使用gm合并两个图像大小和重新排序图层位置(over, under，等等)。

Let's have a look this image first:

让我们先看看这张照片:

After a few minutes digging up ImageMagick's compose help page, i saw the usage of DstOver positioning.

在挖掘了ImageMagick的撰写帮助页面几分钟后，我看到了DstOver定位的用法。

http://www.imagemagick.org/Usage/compose/#dstover

http://www.imagemagick.org/Usage/compose/ dstover

So, i have tried this code below and it worked like a charm!

所以，我尝试了下面的代码，它像一个魅力!

imageMagick(background)
    .composite(image)
    .in('-compose', 'Dst_Over')
    .in('-geometry', '253x253+15+15')
    .write(output, function (err) {
    if (err) console.error(err);
        else console.log('Compose OK!');
    });

#2

Finally I could do it, here I post for reference for anyone may need it:

最后，我可以这样做，我在这里为任何人提供参考:

gm()
.in('-geometry', '+0+0')
.in('./img/img1.png')
.in('-geometry', '300x300+100+200')
.in('./img/img2.png')
.flatten()
.write('resultGM.png', function (err) {
  if (err) console.log(err);
});

#1