如何使用一组div与背景创建jpeg - PHP/jQuery

图像的最终输出如下所示。如何使用一组div与背景创建jpeg - PHP/jQuery

enter image description here

如果你看看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>

如果我们分别看看它将如下所示。

enter image description here

等

我的问题是我怎么能创建使用上述设定的div和图像的单个图像？我可以使用PHP或jQuery？

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

来源

2012-11-13 Techie

我不认为这会像你想要的那样工作。它看起来没有使用原始照明/阴影。 – Brad

是的，它的工作原理。我想知道的是如何将最终输出作为一个图像？将所有内容合并为一个 – Techie

实际上，您不需要JS或PHP来实现重叠。您只需要了解一些CSS基础知识，并将一个文件放在另一个文件的顶部。顶部文件应该是PNG我假设有alpha通道 – Serg

在PHP中，你会做这样的：

宣布最终图像（将结合所有进入一个）与

$最终= imageCreateTrueColor（$ final_width，$ final_height）;
开始所有的图像合并为$final使用 alpha混合imageCopy，从观察者的“远”开始。
在端部，则获得单个最终输出为单个图像与

imageJPEG（$最终，$ outputFileName，$质量）;

你只问“步骤或指导意见”，但你也必须小心：

的初级图像可能是精灵。在这种情况下，您必须从您感兴趣的区域的每张图片中“剪出”。ImageCopy也可以为您做到这一点。
图片可能不够合适，您将必须使用ImageCopyResampled。
正确复制CSS透明度所需的操作可能无法使用GD函数，您将不得不查看imageMagick PHP扩展。
背景图像（“花朵”）可能是重复模式。如果它的大小小于主掩模的大小，则必须在水平和垂直方向上循环以覆盖具有背景纹理的所有最终图像。

来源

2012-11-13 16:57:11 LSerni

看起来不太容易和我想的一样。如果您需要教程或示例代码，请尽可能在此发布 – Techie

你可以使用PHP中的GD来像你想要的那样操纵图像。从你的图片中，我猜你会有多个图层，每一层应该乘以你的“衣服”（为了获得正确的阴影），然后将它们叠加应用，以创建最终的jpg。

你将不得不使用imagecreatefrompng,imagecreate加载你的图像来创建最终的jpg和一系列的（我假设）imagecopy一个接一个地加载你的图层。

来源

2012-11-13 16:41:34 emartel

我能够得到最终的形象，如第一张图片所示。我想知道的是如何将最终输出作为一个图像？全部结合成一个。 – Techie

您可能无法从浏览器中保存图片，除非HTML5有一个功能，我不知道这会允许您这样做。我相信你更好的选择是在PHP中通过再现你的div序列（加载图像并按照它们的Z顺序将它们复制到缓冲区）在PHP中构建图像（JPG或PNG） – emartel

如何使用一组div与背景创建jpeg - PHP/jQuery

回答

相关问题