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

Question

给定两个图像，例如在 img（大小为 1024x768）文件夹（img1.png 和 img2.png）下，我需要调整 img2 的大小（例如 300x300）并将 img1 放在 x 和 y（例如 100、200）从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

您可以使用重力来帮助定位您的图层，然后使用几何图形将其拨入，如下所示：

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

您可以使用此模式添加任意数量的图层，但请记住，它会将所有图像读入内存，因此如果您有很多由大图像组成的图层，您可能希望一次只做两个。

Answer 2

使用 ImageMagick 代替 GraphicMagic；

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

让我们先看看这张图片：

在 ImageMagick 的 compose 帮助页面翻了几分钟后，我看到了 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 3

终于可以做到了，在这里贴出来供大家参考：

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