向 og:image 添加叠加层

Question

我需要在 NodeJs 中为 Facebook 生成带水印的嵌入图像。我注意到一些网站的 facebook 帖子有 banner on their image。使用 NodeJs，我想知道最优雅的方式是什么。（即比 photoshop 动作或其他地方的 PHP 脚本运行更好的东西）。我想将图像裁剪为正确的格式并使用 ImageMagik 添加叠加 PNG 将是可行的选择。您知道提供这种简单功能的在线服务吗？

由于此资源很少从 FB 刷新，因此我不会将其存储在磁盘上并即时生成。

Answer 1

在 ImageMagick 中，您可以使用 -annotate 创建横幅图像并在图像上合成。例如，从您的图片开始，假设我想在顶部放置一个类似的横幅。我创建了一个所需宽度的半透明背景彩色图像，以匹配您的图像以及所需的高度和点大小。然后我把它合成在你的图像的顶部。

convert UT-copy-social.png.jpeg \
\( -size 1200x90 xc:"rgba(255,0,0,0.5)" -font Arial -pointsize 64 \
-fill white -gravity east -annotate +50+0 "TEST" \) \
-gravity north -compose over -composite result.jpg

如果你想要半透明的渐变banner，那么修改如下：

convert UT-copy-social.png.jpeg \
\( -size 90x1200 gradient:"rgba(255,0,0,0.5)-rgba(255,0,255,0.5)" \
-rotate 90 -font Arial -pointsize 64 -fill white \
-gravity east -annotate +50+0 "TEST" \) \
-gravity north -compose over -composite result2.jpg

您也可以使用 -draw 或 label: 进行类似操作。参见 http://www.imagemagick.org/Usage/text/

向 og:image 添加叠加层

Adding an overlay to og:image

image-manipulation

imagemagick

image-processing

node.js

express