0

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

在此处输入图像描述

如果您查看 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>

如果我们分开来看，它将如下所示。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

ETC

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

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

4

2 回答 2

2

在 PHP 中，你会这样做：

  1. 声明最终图像（将全部合并为一个）

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

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

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

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

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

  • 基本图像可能是精灵。在这种情况下，您将不得不从每个图像中“切出”您感兴趣的区域。ImageCopy也可以为您做到这一点。
  • 图片可能尺寸不合适，您必须使用ImageCopyResampled.
  • 使用 GD 函数可能无法使用精确复制 CSS 透明度所需的操作，您必须查看 imageMagick PHP 扩展。
  • 背景图像（“花”）可能是重复的图案。如果它的大小小于主蒙版的大小，您将不得不在水平和垂直方向上循环以使用背景纹理覆盖所有最终图像。
于 2012-11-13T16:57:11.443 回答
1

您可以在 PHP 中使用GD来随意操作图像。从你的照片中，我猜你会有多个图层，每一层都应该乘以你的“衣服”（以获得正确的阴影），然后你将它们一层一层地应用以创建最终的 jpg。

您必须使用imagecreatefrompng,加载您的图像imagecreate来创建最终的 jpg 和一系列（我假设）imagecopy以一个接一个地加载您的图层。

于 2012-11-13T16:41:34.687 回答