在对象上放置图像（Pseudo-3D）

Question

如果有人可以指向一个将图像放在对象上的插件，我将非常感激。具体来说，我需要将上传的图像显示在伪三维视图中的瓶子上。我是一个jQuery新手，所以我似乎不可能自己编写这么难的插件。 例如它应该是什么样的：

编辑：用于显示伪3d的含义的马克杯示例。

Answer 1

您可以通过多种方式实现：

• 服务器端，使用例如。 PHP image manipulation functions：您加载背景（瓶子图像）并覆盖客户端上传的图片。这是我的首选方式，因为您可以提供正确的图像;
• 客户端使用3层解决方法：
  • 最底部：带有空标签的瓶子的图像
  • 中间层：客户的上传图片
  • 最顶层：PNG-24风味相同的瓶子pic，在标签的位置有一个透明的“洞”，这样你就可以通过它看到“标签”（即客户的上传图片）。

免责声明：以下内容不是广告，我提及仅供参考。

我为a website做了类似的事情，允许客户在袋子上“蚀刻”他们自己的照片。我已经使用PHP后端生成行李缩略图，Raphael.js（与the Raphael free transfrom插件一起使用），用于在行李上交互放置图片。

Answer 2

首先是一些结构：

<div id="container">
    <div id="bottle"></div>
    <div id="tag"></div>
</div>

然后你设置样式：

#container{
    position:relative
}
#bottle{
    background: [your bottle image here, no transparency needed]
    z-index:0;
}
#tag{
    position:absolute;
    top: [whatever px];
    left: [another px];
    background: [your tag image here with transparent bg]
    z-index:100;
}