使用 imagemagick 从带有叠加文本的 SVG 创建 PNG 图标

Question

我正在尝试使用 imagemagick 从 SVG 生成 PNG 图像以用于 PWA。我无法确定 PWA 使用的是哪个图像。为了调试这个，我想用索引注释每个生成的 PNG 图像，这样我就可以知道 PWA 在几个不同的场景中使用哪个图像。

下面是我用来从源 SVG 创建带有白色背景的 128x128 可屏蔽 PNG（10% 边距）的命令示例。

convert -background "#ffffff" -density 1000 input.svg -gravity center -resize 128x128 -resize 80% -extent 128x128 icon-128x128.png

我想覆盖一个注释（只是一个数字，可能呈现在一个黑色矩形中），类似于这个模型：

无论目标分辨率如何，我如何对图像进行注释，使文本占图像的一半左右？

Answer 1

您可以在 ImageMagick 7 的一个命令行中执行此操作，如下所示。假设 lena 图像是您的命令的结果。所以我在输出之前添加以下内容：

Unix 语法：

magick lena.png \
-set option:dims "%[fx:w/2]x%[fx:h/2]" \
\( -size "%[dims]" -background none -fill white -gravity center label:"1" \) \
-gravity center -compose over -composite \
result.png

如果在 Windows 上，将以 \ 结尾的行更改为 ^ 并删除括号前的 \。

如果在 ImageMagick 6 上，您可以通过创建数字的大图像然后使用 -distort SRT 缩放到您想要的一半大小来实现。

convert lena.png -set option:scale "%[fx:0.5*h/1000]" \
\( -size 1000x1000 -background none -fill white -gravity center label:"1" \
-distort SRT "%[scale] 0" \) \
-gravity center -compose over -composite \
result.png

使用 imagemagick 从带有叠加文本的 SVG 创建 PNG 图标

Create PNG icons from SVG with overlay text using imagemagick

svg

imagemagick