如何使用带有背景的一组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_width使用alpha混合将所有图像合并为$final和imageCopy，从距离观察者“更远”的位置开始。

• 在最后，您将获得作为单个图像的单个最终输出

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

你只要求“步骤或指导”，但是你也必须小心：

• 基本图像可能是精灵。在这种情况下，您必须从每个图像中“剪切”出您感兴趣的区域。ImageCopy可以为你做这件事
• 图像可能不是合适的大小，你将不得不使用ImageCopyResampled.
• the操作来精确复制CSS透明度可能不能使用GD函数，你将不得不查看imageMagick
• 背景图像("flower")可能是一个重复模式。如果它的大小小于主蒙版的大小，你将不得不在水平和垂直方向循环，以覆盖所有带有背景纹理的最终图像。

Answer 2

您可以在PHP中使用GD随心所欲地操作图像。从你的图片来看，我猜你会有多个层，每一层都应该乘以你的“衣服”(以获得正确的阴影)，然后你将它们一个叠加在另一个之上，以创建最终的jpg。

你必须使用imagecreatefrompng加载你的图像，使用imagecreate来创建最终的jpg，并使用一系列(我假设) imagecopy来依次加载你的图层。