ウェブページ上にレイヤーを含むアバター画像を表示する方法

Question

私はYahooのアバターのようなものを実装しようとしていますが、背景画像が固定されていて、フォアグラウンドでアバターを作成しています。組み合わせの画像パターンの多くを作成している私が今やっている

。次に、すべての画像パターンに2進数を割り当てます。ウェブサイトでは、いくつかのデータを使って2進数を生成し、その番号に固有の画像を参照します。 これは仕事をしますが、いくらかのイメージパターンを変えなければならないと、作業が煩雑になります。もちろん、Fireworksのスライスプロセスを自動化することもできますが、これを実装するためのより良い方法があるかどうかを知りたいと思います。

透明PNG、CSS Z-インデックス、絶対配置を使用して実装することができますが、これはすべてのブラウザで互換性を持たせるために多くの調整を必要とします。

これはSVG/Javascriptを使用する方法がいくつかありますか、ActionScript/Flexなどの方法がありますか？誰かがこれについていくつかのオプションを提案できますか？

Answer 1

ブラウザの互換性について恐ろしいことがなければ、HTML canvas要素を使用してみるといいでしょう。

だから、私はどちらかのフラッシュ、またはPHP GDで行くと思います）。

しかし、微調整についてコメントによって、私はあなたがしていることを前提としています。個人的には、単一のPHPレンダリングページで画像をアセンブルするためのロジックをすべて持っているので、GDを使用します。 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で最終的な画像を作成することができます。