PHP+ImageMagick实现机器人图片重叠排版及顶部文字添加求助

需求 #

• 将最多5张机器人图片合成到1400x500的画布中
• 先移除每张机器人的背景（该步骤已正常生效）
• 机器人从画布南侧中心出发，左右偏移并保留少量重叠
• 在画布顶部添加带描边的文字标题

当前问题 #

• 机器人无重叠排列，导致画布宽度超出1400限制
• 文字出现水平排版异常

现有代码 #

$banner = exec("convert {$robot_img_1} -transparent '#{$hex1}' -resize 350x350 -gravity south \
{$robot_img_2} -transparent '#{$hex_bg2}' -resize 350x350 -gravity south -geometry +400+0 \
{$robot_img_3} -transparent '#{$hex_bg3}' -resize 350x350 -gravity south -geometry +800+0 \
{$robot_img_4} -transparent '#{$hex_bg4}' -resize 350x350 -gravity south -geometry -400+0 \
{$robot_img_5} -transparent '#{$hex_bg5}' -resize 350x350 -gravity south -geometry -600+0 \
\( -size 1400x500 xc:none \
-font 'signpainter-2.ttf' -gravity north -pointsize 88 -fill 'white' -annotate +0+0 'Hello World' -trim +repage \) {$background_type} {$output}");

相关素材 #

• 当前效果：
• 期望效果：
• 原始机器人图片：
  • 
  • 
  • 
  • 
  • 
• 文字描边参考：

解决方案 #

问题分析 #

1. 画布失控：现有代码先处理机器人图片再合并画布，导致机器人的偏移量直接扩展了画布尺寸，没有限制在1400x500内。正确流程是先创建固定尺寸的画布，再将机器人合成到画布上。
2. 机器人偏移不合理：当前±400、±800的偏移量过大，未基于画布中心（x=700）做小范围偏移，无法产生重叠效果。
3. 文字排版异常：文字部分使用-trim导致区域被裁剪，无法对齐画布顶部，且未实现要求的描边效果。

修改后代码 #

$banner = exec("convert -size 1400x500 xc:none {$background_type} \
\( {$robot_img_1} -transparent '#{$hex1}' -resize 350x350 \) -gravity south -geometry +0+0 -composite \
\( {$robot_img_2} -transparent '#{$hex_bg2}' -resize 350x350 \) -gravity south -geometry +120+0 -composite \
\( {$robot_img_3} -transparent '#{$hex_bg3}' -resize 350x350 \) -gravity south -geometry +240+0 -composite \
\( {$robot_img_4} -transparent '#{$hex_bg4}' -resize 350x350 \) -gravity south -geometry -120+0 -composite \
\( {$robot_img_5} -transparent '#{$hex_bg5}' -resize 350x350 \) -gravity south -geometry -240+0 -composite \
-font 'signpainter-2.ttf' -gravity north -pointsize 88 -fill 'white' -stroke 'black' -strokewidth 3 -annotate +0+30 'Hello World' \
{$output}");

代码说明 #

1. 固定画布尺寸：开头先创建1400x500的透明画布，后续所有操作都基于此画布，避免尺寸失控。
2. 机器人重叠排列：以画布南侧中心为基准，设置±120、±240的x轴偏移量（可按需调整），通过-composite将机器人合成到画布上，实现左右偏移+少量重叠的效果。
3. 文字优化：
   • 移除-trim，确保文字对齐画布顶部
   • 添加-stroke 'black' -strokewidth 3实现文字描边（匹配参考图效果）
   • 用+0+30调整文字与顶部的间距，避免紧贴边缘

内容的提问来源于stack exchange，提问作者Chris