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

bla*_*elt 5 css php jquery

我有以下脚本

<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>
Run Code Online (Sandbox Code Playgroud)

生成以下内容: 图-2

我有这个简单的表单来上传图像:

<form action="upload/image" method="post">
<input type="file" name="upload_image" />
<input type="submit" />
</form>
Run Code Online (Sandbox Code Playgroud)

上传图像的原因是为了看看杯子(上图)与图像的外观如何。

现在上传图像后,杯子将如下所示 图2(上传图片后)

图-2

现在,如果您仔细观察上面的图像,您会发现上传的图像粘在杯子上,就像是用 Photoshop 设计的,但实际上并非如此。

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

提前致谢 :)

PS我从这个网站得到了这个想法 - > http://www.zazzle.com/cr/design/pt-mug

我正在尝试实现与网站相同的目标(我已经尝试了很长时间但没有结果......未能将上传的图像放在杯子的图像上)。

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

Sas*_*nga 2

是的,你可以这样做。

如果您检查 Zazzle.com 给定的 url,上传图像后,它会调用其服务器上的一个程序 - “designall.dll”。它正在发挥所有的魔力。

正如我们其他朋友提到的,仅使用 HTML、CSS 和 JavaScript(不使用 Canvas)不可能实现这种效果。

但是使用一些服务器端程序,您可以毫无问题地实现这一点。

当我在 LAMP 上编程时,我给出了一个使用 PHP 和 ImageMagick 实现相同功能的解决方案。

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

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

有关 ImageMagick 插件的更多信息,请访问: ImageMagick Website

有关使用 ImageMagick 扭曲(实际上环绕)图像的方法的更多信息,请访问:Wrapping and Distrotion。这些链接也包含大量带有预览的示例。

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

如果我遗漏了什么,请告诉我。

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

谢谢。