ImageMagick拼接大图后生成的HTML坐标错误问题求助

问题详情 #

本地目录有三张图片，尺寸分别为：

• image-00.png：19 x 21
• image-01.png：20 x 22
• image-02.png：25 x 30

仅使用前两张图时，执行命令：

magick montage *.png -mode Concatenate -background transparent info.html

生成的HTML地图坐标正常：

<map id="image" name="image">
  <area href="image-00.png" shape="rect" coords="0,0,19,21" alt="" />
  <area href="image-01.png" shape="rect" coords="20,0,39,21" alt="" />
</map>

但加入第三张图后，生成的坐标出现异常，前两张图的坐标被放大：

<map id="image" name="image">
  <area href="image-00.png" shape="rect" coords="0,0,24,29" alt="" />
  <area href="image-01.png" shape="rect" coords="25,0,49,29" alt="" />
  <area href="image-02.png" shape="rect" coords="50,0,74,29" alt="" />
</map>

需要获取每张图片在拼接图中的准确坐标，但当前结果不符合预期。

补充说明：使用的三张图片尺寸与上述标注一致。

原因分析 #

ImageMagick的montage工具默认会将所有图片缩放至最大图片的尺寸来对齐排版，当加入尺寸最大的第三张图后，前两张图被等比例放大到和第三张图高度一致，因此对应的坐标也被按比例放大，导致和原图尺寸不匹配。

解决方法 #

添加-geometry +0+0参数强制保持原图尺寸，避免自动缩放：

magick montage *.png -mode Concatenate -background transparent -geometry +0+0 info.html

该参数会让每张图片保持自身原始尺寸进行拼接，生成的HTML地图坐标将与原图尺寸完全对应。

内容的提问来源于stack exchange，提问作者Mr.Smithyyy