为图像添加标签 NodeJS ImageMagick

Question

如果有人问到这个问题，我深表歉意，但我正在努力寻找答案。

我正在将 Node GM 包与 ImageMagick 一起使用。因为我的印象是 label 只能在那里工作。

我想拍照并在上面添加 label。

我最初使用 drawText() 来实现此目的，但我需要利用 IM 中 label 的自动调整大小。我拥有的是：

im(path.join(__dirname, '../public/images/imgen/backgrounds/', color + '_' + type + '.png'))
    .gravity('West')
    .fill('#FFFFFF')
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf'))
    .out('label: ' + text)
    .write(
      path.join(__dirname, '../public/images/imgen/generated/', fileName), function(err) {
        if (!err) {
          // If the write was successful then redirect to the new image
          res.redirect('/images/imgen/generated/' + fileName);
        } else {
          console.error(err);
          res.status(500).end();
        }
    });

上面生成的是两张图片而不是一张。我猜我需要创建一个空图像并将图像作为背景插入。但是我不知道该怎么做。

im(1080, 1080)
    .gravity('West')
    .fill('#FFFFFF')
    .font(path.join(__dirname, '../public/fonts/Lato/Lato-Bold.ttf'))
    // Add the image as a background here
    .out('label: ' + text)
    .write(
      path.join(__dirname, '../public/generated/', fileName), function(err) {
        if (!err) {
          // If the write was successful then redirect to the new image
          res.redirect('/images/imgen/generated/' + fileName);
        } else {
          console.error(err);
          res.status(500).end();
        }
    });

上面说在此处添加图像作为背景，我不知道如何添加图像。我无法在 gm 文档中的任何地方找到它来插入图像。

我试过.out('texture: ...')和.out('background: ...')，但没看。我从 IM convert: no decode delegate for this image formatTEXTURE' @ error/constitute.c/ReadImage/501.`

收到以下错误

我可能没有正确理解 out() 方法。但是通过 Github 问题和搜索结果挖掘并没有找到答案。

在此先感谢您提供的任何帮助。

Answer 1

我对 node.js 中的所有这些括号有一个真正的心理障碍，但你说欢迎任何帮助，所以也许我们可以通过相互努力来解决你的问题。我将从 ImageMagick 的命令行开始，然后您可能会了解幕后发生的事情并能够将其转换为 node.js.

首先，ImageMagick 运算符前面没有破折号，后面有冒号，它们生成自己的 canvas - 这意味着它们不需要一些预先存在的东西来编写或画在。例如 canvas:、xc:、gradient:、label:：

convert -size 100x80 canvas:red a.jpg               # "canvas: is same as "xc:"

convert -size 100x80 gradient:cyan-magenta a.jpg    # "gradient:" has a colon

convert -size 400x60 -undercolor yellow label:"This will be autosized to fit" -trim c.jpg

convert -size 400x60 -undercolor yellow label:"... so will this" -trim c.jpg

希望您能看到 ImageMagick 为较短的消息选择了较大的字体。

一切都很好，但是如果你想使用 -annotate（你会注意到它前面有一个破折号并且后面没有冒号），你需要创建一个 canvas 先注释，然后像这样注释：

convert -size 400x120 xc:blue -fill yellow -annotate +40+80  "Annotation" c.jpg

我要说的是，如果您创建一个 canvas 和一个标签（它会创建自己的 canvas，请记住），您将有效地拥有两个 canvases并得到两个输出图像。因此，您有两种选择来解决这个问题。你要么：

使用canvas并对其进行注释，或者
您创建一个标签和背景图像，然后 将标签 合成 canvas。

我刚刚已经向您展示了第一个选项，让我们来看看第二个选项。您可以创建一个大小合适的标签，然后将其放置在您喜欢的背景上，然后根据需要将其合成到背景上：

convert -size 150x40 -undercolor yellow label:"Some funky text" -trim \
  -size 300x200 -gravity center xc:red +swap -composite result.jpg

所以，这样做的目的是创建一个 150x40 的标签并在其上放置文本。第二行然后创建另一个 300x200 红色的 canvas 并将其放在文本标签后面（使用 +swap）并将其合成到中间。你看，因为我把标签合成到canvas上，所以它们变成了一个合成图像，而不是剩下两个独立的图像。

这是另一个例子，我们有一张白宫的图片，想要创建一个标签并覆盖它。首先我们创建标签，所有尺寸和颜色都正确，然后我们加载白宫图像并将其交换到背面，然后在顶部合成标签：

magick -size 300x200 -background none -fill magenta label:"Some funky label" -trim whitehouse.jpg +swap -gravity southeast -composite result.png

希望你能看到如何将所有可爱的括号放在它周围以使其成为 node.js...

为图像添加标签 NodeJS ImageMagick

Add label to image NodeJS ImageMagick

node.js

image

imagemagick

graphicsmagick