如何将一张图片放在另一张图片上

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。提前感谢：）PS我从这个网站得到了灵感-> http://www.zazzle.com/cr/design/pt-mug。我正在尝试实现与该网站相同的功能（我已经尝试了很长时间，但还没有结果...无法将上传的图像放在杯子的图像上）。

这里是我在这里使用的图片下载链接 http://i43.tinypic.com/d66h4.png

- black_belt

---

它运行良好...（也有相同的代码） - Purag

嗯，鉴于 Skype 图像，这在 CSS 中是不可能的！您必须使用 Gimp 或 PS 中的透明度创建伪效果，并绝对定位上传的图像并逐像素调整它。 - elclanrs

@DrewGalbraith 谢谢您的回复。我提供的链接不是我的网站，我只是在尝试复制它。 :) 我已经编辑了我的问题以消除混淆。谢谢 :) - black_belt

我非常确定，正如@elclanrs所说，这不可能通过html、javascript和css实现。从页面发出的请求来看，该网站似乎使用了一个dll来渲染图像。很可能它正在使用一些第三方程序或他们用c或c++等语言编写的代码。 - Drew Galbraith

您可以使用HTML5画布或WebGL。一个带有纹理的咖啡杯3D模型即可。 - elclanrs

Answer 1

是的，你可以这样做。

如果你检查来自Zazzle.com的给定URL，在上传图像后，它会调用他们服务器上的一个程序 -“designall.dll”。它会完成所有的魔法。

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

但是使用一些服务器端程序，您可以轻松实现此操作。

由于我使用LAMP进行编程，因此我提供了一种使用PHP和ImageMagick实现相同效果的解决方案。

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

关于实际扭曲代码，您可以使用ImageMagick插件。

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

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

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

请告诉我是否遗漏了什么。

朋友们，请帮助“black_belt”提供更好的解决方案。

谢谢。

- Sasidhar Vanga

---

仅使用HTML、CSS和JavaScript无法实现那种效果是不可能的。我非常不同意这种说法。JavaScript和画布可以非常强大。 - AlanFoster

是的，我同意AlanFoster的观点。如果不使用Canvas，仅凭HTML、CSS和JavaScript是无法实现该效果的。对于造成的困惑，我感到抱歉。 - Sasidhar Vanga