4

给定两个图像，例如在 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 composition with gm node.js?和这里：组合两个 gm 对象，同时在 graphicsMagick for NodeJS 中调整其中一个对象的大小（这个没有实际上回答这个问题），我找不到任何解决方案来使用流或缓冲区在内存中执行此操作。在写入临时文件时可以这样做。有没有人可以在内存中找到解决方案动态调整图像大小和合并图像？

4

3 回答 3

4

使用 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!');
    });
于 2016-11-21T16:07:23.337 回答
1

终于我可以做到了，我在这里发布以供任何可能需要的人参考：

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);
});
于 2016-11-15T15:55:04.700 回答
0

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

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

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

于 2020-08-05T02:04:24.333 回答