アバターを生成する方法を示すチュートリアルを見つけました。それを使用して、ドロップボックスがあり、アバターに必要な機能を選択し、[送信]をクリックすると、アバターが生成されて表示されるという簡単なものを作成しました。これはすべてPHPを使用して行われました。Photoshopで、私はこれをどのように見せたいかを（すばやく）設計しましたが、それを実現するための最良の方法がわかりません。ライブアップデートを表示したいので、右側にアバターが表示され、クリックすると画像がアップデートされます。
これが私の希望する外観です：
希望の外観の写真http://my.iheff.net/featuresselection.jpg
私が今持っているもののライブビュー：
そして、これが私が今持っているコードです。
<?php
if (isset($_REQUEST['submit'])) {
//Custom avatar with php
//Author: Joshua Bolduc
//Website: http://www.bolducpress.com
//Disclaimer: This document may be freely used and distributed
//Date: 7/23/2007
class avatar
{
var $filename; //the filename of the image
var $width = 100; //the final width of your icon
var $height = 100; //the final height of the icon
var $parts = array(); //the different images that will be superimposed on top of each other
/**
* SET WIDTH
* This function sets the final width of our avatar icon. Because we want the image to be
* proportional we don't need to set the height (as it will distort the image)
* The height will automatically be computed.
*
* @param Integer $width
*/
function set_width($width)
{
//setting the width
$this->width = $width;
}
/**
* SET FILENAME
* This sets the final filename of our icon. We set this variable if we want
* to save the icon to the hard drive.
*
* @param String $filename
*/
function set_filename($filename)
{
$this->filename = $filename;
}
/**
* SET BACKGROUND
* From this function we can add one of two types of backgrounds
* either an image or a solid color.
*
* @param String $background
*/
function set_background($background)
{
$this->background_source = $background;
}
/**
* ADD LAYER
* This is the meat and potatoes of this class (And it's so small!)
* This function let's us add images to our final composition
*
* @param String $filename
*/
function add_layer($filename)
{
//by using the syntax $this->parts[] we are automatically incrementing the array pointer by 1
//There is no need to do $this->parts[$index] = $filename;
// $index = $index + 1;
$this->parts[] = $filename;
}
/**
* BUILD BACKGROUND
* This function takes our background information and compiles it
*/
function build_background()
{
//----------------------------------------
// Getting the height
//----------------------------------------
//grabbing the first image in the array
$first_image = $this->parts[0];
//getting the width and height of that image
list($width, $height) = getimagesize($first_image);
//finding the height of the final image (from a simple proportion equation)
$this->height = ($this->width/$width)*$height;
//----------------------------------------
// Compiling the background
//----------------------------------------
//the background canvas, it will be the same width and height
$this->background = imagecreatetruecolor($this->width, $this->height);
//----------------------------------------
// Adding a background color
// I'm going to be sending hex color values (#FFFFFF),
//----------------------------------------
//checking to make sure it's a color
if(substr_count($this->background_source, "#")>0)
{
//converting the 16 digit hex value to the standard 10 digit value
$int = hexdec(str_replace("#", "", $this->background_source));
//getting rgb color
$background_color = imagecolorallocate ($this->background, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
//filling the background image with that color
imagefill($this->background, 0,0,$background_color);
//----------------------------------------
// Adding a background image
// If $background is not a color, assume that it's an image
//----------------------------------------
}else{
//getting the width and height of the image
list($bg_w, $bg_h) = getimagesize($this->background_source);
// Make sure that the background image is a png as well.
$img = imagecreatefrompng($this->background_source);
//This function copies and resizes the image onto the background canvas
imagecopyresampled($this->background, $img, 0,0,0,0,$this->width, $this->height, $bg_w, $bg_h);
}
}
/**
* Build Composition
* This function compiles all the information and builds the image
*/
function build_composition()
{
//----------------------------------------
// The Canvas
// Creating the canvas for the final image, by default the canvas is black
//----------------------------------------
$this->canvas = imagecreatetruecolor($this->width, $this->height);
//----------------------------------------
// Adding the background
// If the background is set, use it gosh darnit
//----------------------------------------
if($this->background)
{
imagecopyresampled($this->canvas, $this->background, 0,0,0,0,$this->width, $this->height, $this->width, $this->height);
}
//----------------------------------------
// Adding the body parts
// Here we go, the best part
//----------------------------------------
//looping through the array of parts
for($i=0; $i<count($this->parts); $i++)
{
//getting the width and height of the body part image, (should be the same size as the canvas)
list($part_w, $part_h) = getimagesize($this->parts[$i]);
//storing that image into memory (make sure it's a png image)
$body_part = imagecreatefrompng($this->parts[$i]);
//making sure that alpha blending is enabled
imageAlphaBlending($body_part, true);
//making sure to preserve the alpha info
imageSaveAlpha($body_part, true);
//finally, putting that image on top of our canvas
imagecopyresampled($this->canvas, $body_part, 0,0,0,0,$this->width, $this->height, $part_w, $part_h);
}
}
/**
* OUTPUT
* This function checks to see if we're going to ouput to the header or to a file
*/
function output()
{
// If the filename is set, save it to a file
if(!empty($this->filename))
{
//notice that this function has the added $this->filename value (by setting this you are saving it to the hard drive)
imagejpeg($this->canvas, $this->filename,100);
//Otherwise output to the header
}else{
//before you can output to the header, you must tell the browser to interpret this document
//as an image (specifically a jpeg image)
header("content-type: image/jpeg");
imagejpeg($this->canvas, "member/1637/pic1.jpg");
//Output, notice that I ommitted $this->filename
imagejpeg($this->canvas, "", 100);
}
//Removes the image from the buffer and frees up memory
imagedestroy($this->canvas);
}
/**
* BUILD
* The final function, this builds the image and outputs it
*/
function build()
{
//Builds the background
$this->build_background();
//builds the image
$this->build_composition();
//outputs the image
$this->output();
}
}
$avatar = new avatar;
$base = "base";
$bgcolor = $_POST['bgcolor'];
$hand = $_POST['hand'];
$headgear = $_POST['headgear'];
$leggear = $_POST['leggear'];
$face = $_POST['face'];
//setting the width of your final image (the image will
//resize themselves dynamically)
$avatar->set_width(200);
//setting your background color to black
$avatar->set_background("#$bgcolor");
//you can also send it an image
//$avatar->set_background("my_background_image.png");
//ah hah! adding your body parts, think of it like layers
//in photoshop in reverse order.
$avatar->add_layer("base.png");
if($hand != "none"){
$avatar->add_layer("$hand.png");
}
if($headgear != "none"){
$avatar->add_layer("$headgear.png");
}
if($leggear != "none"){
$avatar->add_layer("$leggear.png");
}
if($face != "none"){
$avatar->add_layer("$face.png");
}
$avatar->build();
}
?>
<form method="post" action="avatartest1.php" name="myform" id="myform">
<tr>
<td align="right">
Background Color </td>
<td>
<div id='myform_bgcolor_errorloc' class="error_strings"></div>
<select name="bgcolor">
<option value="000000">Black</option>
<option value="FFFFFF">White</option>
<option value="FF7F50">Coral</option>
<option value="DC143C">Crimson</option>
<option value="E9967A">Salmon</option>
<option value="FFB6C1">Pink</option>
<option value="BA55D3">Orchid</option>
<option value="008080">Teal</option>
</select> </td>
</tr>
<tr>
<td align="right">
Hand </td>
<td>
<div id='myform_hand_errorloc' class="error_strings"></div>
<select name="hand">
<option value="beer">Beer</option>
<option value="martini">Martini</option>
<option value="pickle">Pickle</option>
</select> </td>
</tr>
<tr>
<td align="right">
Head Gear </td>
<td>
<div id='myform_headgear_errorloc' class="error_strings"></div>
<select name="headgear">
<option value="hat">Hat</option>
<option value="none">None</option>
</select> </td>
</tr>
<tr>
<td align="right">
Leg Gear </td>
<td>
<div id='myform_leggear_errorloc' class="error_strings"></div>
<select name="leggear">
<option value="shorts">Shorts</option>
<option value="none">None</option>
</select> </td>
</tr>
<tr>
<td align="right">
Face </td>
<td>
<div id='myform_face_errorloc' class="error_strings"></div>
<select name="face">
<option value="mustache">Mustache</option>
<option value="none">None</option>
</select> </td>
</tr>
<tr>
<td align="right"></td>
<td>
<input type="submit" name="submit" value="Submit" />
</td>
</tr>
</table>
</form><script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("hand","req","Choose what your avatar holds");
frmvalidator.addValidation("headgear","req","Choose head gear");
frmvalidator.addValidation("leggear","req","Choose leg gear");
frmvalidator.addValidation("face","req","Choose face stuff");
//]]></script>
つまり、コードから目的の出力に移動するための最良の方法は何でしょうか。ユーザーが表示されている機能の1つをクリックし、クリックすると画像全体が更新される出力。前もって感謝します！