php - 如何使用带有背景的 div 集创建 jpeg - PHP/jQuery

Question

图像的最终输出如下所示。

如果你查看 html 部分，它是使用不同的 div 创建的，如下所示。所有的 div 都使用 CSS 一对一放置，并将位置设置为绝对。

<div id="tproduct" class="timage" style="z-index: 30; background-image: url('main-mask.png') ;"></div>
<div id="tdesign1" class="timage" style="z-index: 20; background-image: url('design1.png');"></div>
<div id="tdesign2" class="timage" style="z-index: 20; background-image: url('design2.png');"></div>
<div id="tmaincolor" class="timage" style="background-color:blue;"></div>
<div id="tembellishment" class="timage" style="z-index: 10; background-image: url('flower.png');"></div>

如果我们单独看的话，它会像下面这样。

等等

我的问题是如何使用上面的 div 和图像集创建单个图像？我可以使用 PHP 或 jQuery 吗？

我只想要步骤或指导如何完成。谢谢

Answer 1

在 PHP 中，你会这样做:

1. 声明最终图像(将所有图像组合成一个)

   $final = imageCreateTrueColor($final_width, $final_height);

2. 开始使用 imageCopy 将所有图像组合到 $final 中Alpha混合，从距离观察者“更远”的地方开始。

3. 最后，您将获得单个最终输出作为单个图像

   imageJPEG($final, $outputFileName, $quality);

您只要求“步骤或指导”，但您也必须小心:

• 基本图像可能是 Sprite 。在这种情况下，您必须从每个图像中“剪切”您感兴趣的区域。ImageCopy 也可以为您做到这一点。
• 图像大小可能不正确，您必须使用 ImageCopyResampled。
• 使用 GD 函数可能无法实现精确复制 CSS 透明度所需的操作，您必须研究 imageMagick PHP 扩展。
• 背景图像(“花”)可能是重复图案。如果它的大小小于主蒙版的大小，您将必须在水平和垂直方向上循环，以用背景纹理覆盖所有最终图像。