在Nodejs中使用gm调整大小并组合两个或多个图像

Question

鉴于两张图片，比如img（大小为1024x768）文件夹（img1.png和img2.png），我需要调整img2（比如说300x300）并在x和y（比如100,200）中加上img1从img1的左上角。最终结果应为1024x768尺寸的图像。

使用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);
});

预计（由于整个操作链）它产生300x300图像。 然后我尝试了这个：

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

希望复合函数接受缓冲区，但没有机会，它只接受文件路径，并且它给出了错误。花了2-3个小时阅读了几篇文章（只能在这里找到一些讨论：How to do composite with gm node.js?和这里：Combine two gm objects while resizing one of them in graphicsMagick for NodeJS（这个实际上没有回答这个问题），我找不到任何使用流或缓冲区在内存中执行此操作的解决方案。在写入临时文件时可以执行此操作。是否有任何正文可以在内存中找到解决方案调整大小并动态合并图像？

Answer 1

使用ImageMagick代替GraphicMagic;

经过几个小时的搜索，我终于找到了如何合并两个图像，使用gm调整大小并重新排序图层位置（上方，下方等）。

让我们先来看看这张图片：

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

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

所以，我在下面尝试过这个代码，它就像一个魅力！

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!');
    });

Answer 2

最后我可以做到，在这里我发帖以供任何人可能需要它：

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);
});

Answer 3

您可以使用重力来帮助放置图层，然后使用几何图形将其插入：

import * as graphics from 'gm';
const gm = graphics.subClass({ imageMagick: true });

type GravityDirection = 'NorthWest'
    | 'North'
    | 'NorthEast'
    | 'West'
    | 'Center'
    | 'East'
    | 'SouthWest'
    | 'South'
    | 'SouthEast';


 gm('pathToTopLayerImg')
   .in('pathToBaseImg')
   .gravity('Center')
   .geometry('+10+10')
   .out('-composite')
   .write('pathToDestination', err => {
      if (err) console.log(err);
   })

如果要在基本图像中添加其他图层，则：

 gm('pathToFirstLayerImg')
   .in('pathToBaseImg')
   .gravity('Center')
   .geometry('+10+10')
   .out('-composite')
   .out('pathToSecondLayer')
   .out('-gravity', 'NorthWest')
   .out('-geometry', '+10+10')
   .out('-composite')
   .write('pathToDestination', err => {
      if (err) console.log(err);
   })

您可以使用此模式添加任意多个图层，但是请记住，它将把所有图像读入内存，因此，如果您有很多由大图像组成的图层，则一次只可以执行两个操作。