Question

如果有人问我这是否有道歉，但我很难找到答案。

我正在使用带有ImageMagick的Node GM软件包。由于我的印象是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 format TEXTURE'@ error / construct.c / ReadImage / 501获得以下错误。

我可能没有正确理解out（）方法。但是挖掘Github问题和搜索结果并没有得出答案。

提前感谢您提供任何帮助。

Answer 1

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

第一件事是ImageMagick操作符在它们之前没有破折号并且在它们之后带有冒号生成它们自己的画布 - 这意味着它们不需要一些预先存在的东西来编写或绘制。示例包括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（你会注意到它前面有一个破折号，后面没有冒号），你需要先创建一个画布，然后再注释它之后就是这样：

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

我要做的是，如果你创建一个画布和一个标签（创建自己的画布，请记住），你将有效地拥有两个画布并获得两个输出图像。所以，你有两种方法可以解决这个问题。你要么：

使用画布并对其进行注释，或
您创建标签和背景图片，然后在画布上复合标签。

我刚刚向您展示了第一个选项，让我们看看第二个选项。您可以创建正确尺寸的标签，然后将其放置在任何您喜欢的背景上，然后根据需要将其合成到背景上：

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

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

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

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

希望你能看到如何把所有心爱的括号放到node.js ....

添加标签到图像NodeJS ImageMagick

1 个答案: