如何将图像放在另一个图像上

Question

我有以下脚本

<div class="left">
<img src="image1.jpg" height="186" width="160" /> 
</div>

<div class="center">
<img src="image2.jpg" height="186" width="160" /> 
</div>

<div class="right">
<img src="image3.jpg" height="186" width="160" /> 
</div>

生成以下内容：

我有这个简单的表格来上传图片：

<form action="upload/image" method="post">
<input type="file" name="upload_image" />
<input type="submit" />
</form>

上传图片的原因是看看图片（上图）与图片的外观如何。

现在，在上传图像后，杯子看起来就像下面一样

图-2

现在，如果你仔细看看上面的图片，你会看到上传的图像贴在马克杯上，仿佛它是用Photoshop设计的，但实际上并非如此。

现在我的问题是，请您告诉我如何将上传的图像粘贴到咖啡杯的所有三个图像上，并使它们看起来像图-2。

提前致谢：）

P.S 我从这个网站得到了这个想法 - ＆gt; http://www.zazzle.com/cr/design/pt-mug

我正在尝试实现网站所拥有的相同功能（我已经尝试了很长时间但却没有结果......未能将上传的图像放在马克杯的图像上）。

以下是我在此处http://i43.tinypic.com/d66h4.png

使用的图片的下载链接

Answer 1

是的，你可以这样做。

如果您检查Zazzle.com上的给定网址，则在上传图片后，它会在其服务器上调用一个程序 - “designall.dll”。它正在做所有的魔力。

正如我们的其他朋友所提到的，仅使用HTML，CSS和JavaScript（不使用Canvas）无法实现这种效果。

但是使用某些服务器端程序，您可以毫无问题地实现此目的。

当我在LAMP上编程时，我正在给出一个用PHP和ImageMagick实现相同的解决方案。

• 用户上传图片。
• 图像将被发送到后端PHP文件。
• PHP会根据我们的要求扭曲图像。
• 创建三个副本并存储在具有一些唯一ID的临时文件夹中。
• 作为对此的回应，我们将获得一些成功代码。
• 获得成功代码后，我们将从temp文件夹中加载图片。
• 当用户点击任何类型的图片时，我们会根据需要更新图片。

关于实际的失真代码，您可以使用ImageMagick插件。

有关ImageMagick插件的更多信息，请访问： ImageMagick Website

有关使用ImageMagick扭曲（实际包装）图像的方法的更多信息，请访问：Wrapping和Distrotion。这些链接包含大量带预览的示例。

对于我们的示例，我们需要创建一些静态代码，每次都会以相同的形状扭曲图像。

如果我错过了什么，请告诉我。

朋友们，如果有更好的解决方案，请帮助“black_belt”。

感谢。