如何在网页上显示具有图层的图像的头像

Question

我正在尝试实现类似Yahoo Avatars的东西，其中有固定的背景图像，然后我在前台安排了几个项目来创建一个头像。

我现在正在做的是创建许多组合图像模式。然后为每个图像模式分配二进制数。在网站上我使用一些数据生成二进制数，并参考特定于该数字的图像。 如果我必须改变一些图像模式，这可以完成工作但占用大量空间并且工作变得多余。我当然可以自动化Fireworks导出切片过程，但我想知道是否有更好的方法可以实现它。

我可以使用透明的PNG，CSS z-index和绝对定位来实现这一点，但这需要进行大量调整才能使其在所有浏览器中兼容。

是否有某些方法可以使用SVG / Javascript或者可能是ActionScript / Flex或其他方式？有人可以为此提出一些选择吗？

Answer 1

如果您对浏览器兼容性并不十分担心，我可能会考虑使用HTML canvas元素。

但是，根据你对调整的评论，我认为你是;）

所以，我要么使用Flash，要么使用PHP GD。就个人而言，我会选择GD，因为你拥有所有逻辑，可以在一个php渲染页面中组装图像。没有跨浏览器兼容性的问题或没有安装Flash的客户端（或没有本机Flash插件的浏览器;）。

Answer 2

我同意@Demian Brecht的意见，你应该在服务器端生成图像，然后只向浏览器输出一个简单的.png图像。

但是，如果您希望用户能够在头像中拖动内容，自定义狗的位置或帽子，或其他任何内容，那么这将无法正常工作。

---

这是一个使用无聊的矩形而不是酷图像的HTML / CSS解决方案：

我们的想法是为每件物品制作精确大小，透明.png的图片。

您拥有top, left, width, height, z-index属性 - 这就是让您的用户精确定位所需的一切;添加了一点jQuery魔法。

Live Demo（不包含任何JS）

<强> CSS：

.avatarContainer {
    width: 153px;
    height: 226px;
    border: 1px solid #666;
    background: #ccc;
    position: relative
}
.avatarContainer div {
    position: absolute
}

<强> HTML：

<div class="avatarContainer">
    <div style="top:20px; left:40px; width:40px; height:50px; background:red; z-index:3"></div>
    <div style="top:60px; left:40px; width:80px; height:60px; background:blue; z-index:2"></div>
    <div style="top:180px; left:10px; width:110px; height:20px; background:#000; z-index:1"></div>
</div>

我会用这个只是为了让用户拖动东西并将位置提交给服务器;然后你可以用PHP制作最终的图像。