Как отобразить аватар как изображения со слоями на веб-странице

Question

Я пытаюсь реализовать что-то вроде аватаров Yahoo, где есть фиксированное фоновое изображение, а затем я размещаю несколько элементов на переднем плане, создавая аватар.

То, что я сейчас делаю, - это создание множества комбинаций изображений. Затем присвойте каждому образу изображения двоичное число. На веб-сайте я генерирую двоичное число, используя некоторые данные, и ссылаюсь на изображение, соответствующее этому номеру. Это делает работу, но занимает много места, и работа становится излишней, если мне нужно изменить шаблон изображения. Конечно, я могу автоматизировать процесс экспорта фрагментов 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, использующее скучные прямоугольники вместо классныхimages:

Идея состоит в том, чтобы сделать прозрачные .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.