实时视图的头像生成器

时间:2012-10-24 01:37:45

标签: php javascript ajax

我找到了一个教程,展示了如何生成一个头像,然后我用它做了一个简单的事情,你有下拉框并选择你想要的功能,点击提交,然后它生成并显示你的头像。这都是使用PHP完成的。在Photoshop中我(快速)设计了我希望这样看的方式,但我不知道实现这一目标的最佳方法。我希望它显示实时更新,因此它会在右侧显示您的头像,当您单击它时,它会更新图像。

这是我想要的样子:

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

我现在拥有的实时视图:

Here

这是我现在的代码。

<?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 个答案:

答案 0 :(得分:1)

设置你的PHP脚本只是构建图像并返回它(即,php应该不返回html,只返回image / png或image / jpeg或其他)。您已经定义了所有函数,因此应该非常简单。

设置HTML表单以选择要应用的图层 - 使其漂亮是您自己的一种。

(这是错的,请参阅下面的编辑)当您在表单中触发onchange事件时,使用AJAX从html表单调用php脚本。对XMLHTTPRequest做一些关于这一步骤背后的研究。

发出请求后,您可以使用javascript将图片放入页面上的元素中。

如果这个级别太高而且在我完成工作时还没有其他人已经完成,我很乐意给出一个更深入的例子。

编辑: 好的,所以当我第一次读这篇文章时,我发现自己有一个大脑放屁,因为我之前尝试过做这个,我已经知道它不起作用了。为了通过AJAX检索图像,您需要将其实际保存在php中的服务器上并通过ajax传回文件名,表单上的javascript将用于提供图像源。这是一个漫长的过程,我很抱歉,但我不打算通过它,你可以自己研究那个。

好处是有一种远,远,远,远,更容易的方法。

1:将以下功能添加到表单页面 -

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:在表单中添加一个id属性设置为'resultImage'的图像。图像src应该指向在进行任何更改之前出现的图像(默认背景,没有叠加)

3:修改你的php代码从$ _GET []而不是$ _POST []中获取数据(在下面的部分用GET替换POST)

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

4:对于表单中的每个选择框,添加onchange =“updateImage()”