Live View of Avatar Generator

Question

I found a tutorial showing how to generate a avatar, then I used that and made a simple thing where you have drop boxes and select the features you want for you avatar, click submit and then it generates and shows your avatar. This was all done using PHP. In Photoshop I (quickly) designed how I would want this to look, but I don't know the best way to achieve that. I want it show a live update, so it would show your avatar on the right and when you click it, it would update the image.

Here is my desired look:

picture of desired look http://my.iheff.net/featuresselection.jpg

A live view of what I have now:

Here

And here is the code I have right now.

<?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>

So in short, what would be the best way to go from my code to my desired output. An output where the user clicks one of the features shown and once that is clicked it updates the full image. Thanks in advance!

Answer 1

Set up your PHP script to just build the image and return it (ie, the php should be returning no html, just the image/png or image/jpeg or whatever). You already have all your functions defined so that should be pretty simple.

Set up the HTML form to choose which layers to apply - making it pretty is your own perogative.

(This is wrong, see edit below) use AJAX to call the php script from the html form when an onchange event is triggered in your form. Do some research on XMLHTTPRequest for the how behind this step.

After the request is made you can use javascript to put the image into an element on your page.

If this is too high level and no one else has already by the time I am finished work I'd be happy to give a more in depth example.

EDIT: OK so it turns out I was having a brain fart when I first read this, because I have attempted to do this before and I already know it doesn't work. In order to retrieve the image by AJAX you would need to actually save it on the server in your php and pass a filename back via ajax, which your javascript on the form would use to give the source of the image. This is a long process and I'm sorry but I'm not going to run through it, you can research that one yourself.

The good thing is there is a far, far, far, far, far easier way to do this.

1: Add the function below to the form page-

function updateImage() {
    var bgcolor=document.getElementById("bgcolor").value,
        face=document.getElementById("face").value,
        hand=document.getElementById("hand").value,
        headgear=document.getElementById("headgear").value,
        leggear=document.getElementById("leggear").value;
    var path="http://my.iheff.net/avatartest1.php?bgcolor=" + encodeURIComponent(bgcolor) 
        + "&face=" + encodeURIComponent(face) 
        + "&hand=" + encodeURIComponent(hand) 
        + "&headgear=" + encodeURIComponent(headgear) 
        + "&leggear=" + encodeURIComponent(leggear) 
        + "&submit=Submit";
    document.getElementById("resultImage").src = path;  
}

2: add an image to your form with the id attribute set to 'resultImage'. The image src should point to the image as it would appear before any changes are made (default background, no overlays)

3: modify your php code to source it's data from $_GET[] rather than $_POST[] (in the section below replace POST with GET)

$bgcolor = $_POST['bgcolor'];
$hand = $_POST['hand'];
$headgear = $_POST['headgear'];
$leggear = $_POST['leggear'];
$face = $_POST['face'];

4: for each of your select boxes in the form, add onchange="updateImage()"