我找到了一个教程，展示了如何生成一个头像，然后我用它做了一个简单的事情，你有下拉框并选择你想要的功能，点击提交，然后它生成并显示你的头像。这都是使用PHP完成的。在Photoshop中我（快速）设计了我希望这样看的方式，但我不知道实现这一目标的最佳方法。我希望它显示实时更新，因此它会在右侧显示您的头像，当您单击它时，它会更新图像。
这是我想要的样子：
picture of desired look 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>
简而言之，从我的代码到我想要的输出的最佳方式是什么。用户单击其中一个功能的输出，单击该功能后，将更新完整图像。提前谢谢！
答案 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（）”