PHP Imagecopy() alternative >> Javascript?

[venom2k6]

mahlzeit zusammen.

Ich habe ein PHP-Script erstellt, welches mehrere Bilder zusammenfügt. Hierfür habe ich mich der ImageCopy() Funktion bedient.
Das Script habe ich damals 2009 geschrieben und es war zu meiner anfänglichen PHP-Zeit und ist halt sehr altbackend

Nun Frage ich mich wie ich das in Javascript realisieren könnte, geplant habe ich an sich das Links eine Auswahl der verschiedenen Objekte ist und rechts das Ergebnis in quasi (Echtzeit) generiert/angezeigt wird und mittels Rechtsklick "speichern unter" gespeichert werden kann.

den Onlick Handler in ein anderes Objekt schieben sollte ich hinkriegen, ist ja wie ein Smilie in ein Textfeld per Klick befördern (denke ich).

ich will aber beim klick auf mehrere Objekte nicht das Objekt überschreiben sondern hinzufügen.

Ziel des Script ist es sich einen Avatar zusammenzuklicken, dieses sieht dann beispielsweise so aus:


das Gesicht wird wie folgt zusammengesetzt

Gesicht, Haare, Haarfarbe, Kleidung, Kleidungsfarbe, Cappy, Cappyfarbe, Accessoire

viel mit JavaScript habe ich bisher nicht gemacht, ich will jetzt auch nicht das ihr mein Script demenstprechend umschreibt. Ich will einfach nur wissen wo ich genau ansetzen muss damit ich hier voran komme

Hier das Script:

Spoiler

[src=php]
<h2>Erstell dir dein Managerbild für Fussballcup.de</h2><br>
<?php
//error_reporting(1);
if(isset($_POST['hautstil'])) {
$gesicht = $_POST['hautstil'];
$clothes = $_POST['kleidung'];
$clothes_color = $_POST['kleidungsfarbe'];
$hairtype = $_POST['haartyp'];
$hair_color = $_POST['haarfarbe'];
$assessoire = $_POST['sonstiges'];
$cap_choice = $_POST['cappy'];
$cap_color = $_POST['cappycolor'];
/**
$gesicht = "Asiatisch";

$clothes = "Anzug";
$clothes_color = "Schwarz";
$hairtype = "1";
$hair_color = "Blond";
$assessoire = "1";

echo "<br>".$gesicht;
echo "<br>".$clothes;
echo "<br>".$clothes_color;
echo "<br>".$hairtype;
echo "<br>".$hair_color;
echo "<br>".$assessoire;
*/


$clothes_color_no = 0;
$hair_color_no = 0;
$cap_color_no = 0;
$gclothes_color_no = 0;
$ghair_color_no = 0;
$gcap_color_no = 0;

//Aufbau Gesicht
if($gesicht == "Deine Wahl...")
{
$face = ImageCreateFromPNG("img/face0".rand(1,4).".png");
$gface = ImageCreateFromPNG("img/gface0".rand(1,4).".png");
}
if($gesicht == "Mitteleuropa")
{
$face = ImageCreateFromPNG("img/face01.png");
$gface = ImageCreateFromPNG("img/gface01.png");
}
if($gesicht == "Afrika")
{
$face = ImageCreateFromPNG("img/face02.png");
$gface = ImageCreateFromPNG("img/gface02.png");
}
if($gesicht == "Latein-Amerika")
{
$face = ImageCreateFromPNG("img/face03.png");
$gface = ImageCreateFromPNG("img/gface03.png");
}
if($gesicht == "Asien")
{
$face = ImageCreateFromPNG("img/face04.png");
$gface = ImageCreateFromPNG("img/gface04.png");
} else { echo "bin im elsefall";}

//Bestimmung der Kleidungsfarbe
if($clothes_color == "Deine Wahl...")
{
$clothes_color_no = rand(1,5);
$gclothes_color_no = rand(1,5);
}
if($clothes_color == "Schwarz")
{
$clothes_color_no = 1;
$gclothes_color_no = 1;
}
if($clothes_color == "Grün")
{
$clothes_color_no = 2;
$gclothes_color_no = 2;
}
if($clothes_color == "Blau")
{
$clothes_color_no = 3;
$gclothes_color_no = 3;
}
if($clothes_color == "Gelb")
{
$clothes_color_no = 4;
$gclothes_color_no = 4;
}
if($clothes_color == "Rot")
{
$clothes_color_no = 5;
$gclothes_color_no = 5;
}

//Bestimmung der Kleidungsfarbe
if($cap_color == "Deine Wahl...")
{
$cap_color_no = rand(1,5);
$gcap_color_no = rand(1,5);
}
if($cap_color == "Schwarz")
{
$cap_color_no = 1;
$gcap_color_no = 1;
}
if($cap_color == "Grün")
{
$cap_color_no = 2;
$gcap_color_no = 2;
}
if($cap_color == "Blau")
{
$cap_color_no = 3;
$gcap_color_no = 3;
}
if($cap_color == "Gelb")
{
$cap_color_no = 4;
$gcap_color_no = 4;
}
if($cap_color == "Rot")
{
$cap_color_no = 5;
$gcap_color_no = 5;
}

//Aufbau der Kleidung
if($clothes == "Deine Wahl...")
{
$kleidung = ImageCreateFromPNG("img/dress/dress01.png");
$gkleidung = ImageCreateFromPNG("img/dress/gdress01.png");
}
if($clothes == "Anzug")
{
$kleidung = ImageCreateFromPNG("img/dress/dress0".$clothes_color_no.".png");
$gkleidung = ImageCreateFromPNG("img/dress/gdress0".$gclothes_color_no.".png");
}
if($clothes == "T-Shirt")
{
$kleidung = ImageCreateFromPNG("img/dress/dress1".$clothes_color_no.".png");
$gkleidung = ImageCreateFromPNG("img/dress/gdress1".$gclothes_color_no.".png");
}

//Bestimmung der Haarfarbe
if($hair_color == "keine")
{
$hair_color_no = 0;
$ghair_color_no = 0;
}
if($hair_color == "Blond")
{
$hair_color_no = 1;
$ghair_color_no = 1;
}
if($hair_color == "Braun")
{
$hair_color_no = 2;
$ghair_color_no = 2;
}
if($hair_color == "Schwarz")
{
$hair_color_no = 3;
$ghair_color_no = 3;
}
if($hair_color == "Rot")
{
$hair_color_no = 4;
$ghair_color_no = 4;
}
if($hair_color == "Grau")
{
$hair_color_no = 5;
$ghair_color_no = 5;
}

//Aufbau der Haar
if($hairtype == "Glatze")
{
$haare = ImageCreateFromPNG("img/hair/empty.png");
$hair_color_no = 0;
$ghaare = ImageCreateFromPNG("img/hair/gempty.png");
$ghair_color_no = 0;
}
if($hairtype == "Haartyp 1")
{
$haare = ImageCreateFromPNG("img/hair/hair0".$hair_color_no.".png");
$ghaare = ImageCreateFromPNG("img/hair/ghair0".$ghair_color_no.".png");
}
if($hairtype == "Haartyp 2")
{
$haare = ImageCreateFromPNG("img/hair/hair1".$hair_color_no.".png");
$ghaare = ImageCreateFromPNG("img/hair/ghair1".$ghair_color_no.".png");
}
if($hairtype == "Haartyp 3")
{
$haare = ImageCreateFromPNG("img/hair/hair2".$hair_color_no.".png");
$ghaare = ImageCreateFromPNG("img/hair/ghair2".$ghair_color_no.".png");
}
if($hairtype == "Haartyp 4")
{
$haare = ImageCreateFromPNG("img/hair/hair3".$hair_color_no.".png");
$ghaare = ImageCreateFromPNG("img/hair/ghair3".$ghair_color_no.".png");
}
if($hairtype == "Haartyp 5")
{
$haare = ImageCreateFromPNG("img/hair/hair4".$hair_color_no.".png");
$ghaare = ImageCreateFromPNG("img/hair/ghair4".$ghair_color_no.".png");
}

// Assessoire aufbauen
if($assessoire == "keines")
{
$asses = ImageCreateFromPNG("img/asses/empty.png");
$gasses = ImageCreateFromPNG("img/asses/gempty.png");
}
if($assessoire == "Brille 1")
{
$asses = ImageCreateFromPNG("img/asses/glasses01.png");
$gasses = ImageCreateFromPNG("img/asses/gglasses01.png");
}
if($cap_choice == "Cap 1")
{
$cappy = ImageCreateFromPNG("img/asses/cap0".$cap_color_no.".png");
$gcappy = ImageCreateFromPNG("img/asses/gcap0".$cap_color_no.".png");
}
if($cap_choice == "keine")
{
$cappy = ImageCreateFromPNG("img/asses/empty.png");
$cap_color_no = 0;
$gcappy = ImageCreateFromPNG("img/asses/gempty.png");
$gcap_color_no = 0;
}

ImageCopy($face, $kleidung, imagesx($face)-imagesx($kleidung), imagesy($face)-imagesy($kleidung), 0, 0, imagesx($kleidung), imagesy($kleidung));
ImageCopy($face, $asses, imagesx($face)-imagesx($asses), imagesy($face)-imagesy($asses), 0, 0, imagesx($asses), imagesy($asses));
ImageCopy($face, $haare, imagesx($face)-imagesx($haare), imagesy($face)-imagesy($haare), 0, 0, imagesx($haare), imagesy($haare));
ImageCopy($face, $cappy, imagesx($face)-imagesx($cappy), imagesy($face)-imagesy($cappy), 0, 0, imagesx($cappy), imagesy($cappy));

ImageCopy($gface, $gkleidung, imagesx($gface)-imagesx($gkleidung), imagesy($gface)-imagesy($gkleidung), 0, 0, imagesx($gkleidung), imagesy($gkleidung));
ImageCopy($gface, $gasses, imagesx($gface)-imagesx($gasses), imagesy($gface)-imagesy($gasses), 0, 0, imagesx($gasses), imagesy($gasses));
ImageCopy($gface, $ghaare, imagesx($gface)-imagesx($ghaare), imagesy($gface)-imagesy($ghaare), 0, 0, imagesx($ghaare), imagesy($ghaare));
ImageCopy($gface, $gcappy, imagesx($gface)-imagesx($gcappy), imagesy($gface)-imagesy($gcappy), 0, 0, imagesx($gcappy), imagesy($gcappy));

$uhrzeit = date("G:i:s");
$pfad = "img/fertig/".strftime('%H-%M-%S').".png";
$gpfad = "img/fertig/big".strftime('%H-%M-%S').".png";
ImagePNG($face, $pfad);
ImagePNG($gface, $gpfad);

ImageDestroy($face);
ImageDestroy($gface);
}
?>

<form id="form1" name="form1" method="post" action="index.php?page=createurmanager">
<table width="610" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Hautstil</td>
<td width="180">
<label>
<select name="hautstil" class="form_dropdown">
<option>Deine Wahl...</option>
<option>Mitteleuropa</option>
<option>Afrika</option>
<option>Latein-Amerika</option>
<option>Asien</option>
</select>
</label></td>
<td width="20"> </td>
<td width="100" style="text-align: center; font-weight: bold;">Dein Ergebnis:</td>
<td width="220" style="text-align: center; font-weight: bold;">Dein großes Ergebnis:</td>
</tr>
<tr>
<td>Kleidung</td>
<td>
<label>
<select name="kleidung" class="form_dropdown">
<option>Deine Wahl...</option>
<option>Anzug</option>
<option>T-Shirt</option>
</select>
</label></td>
<td> </td>
<td valign="top" rowspan="6" style="text-align: center;"><img src="<?php echo $pfad ?>" style="width: 80px; height: 80px;" alt="no created manager"></td>
<td valign="top" rowspan="6" style="text-align: center;"><img src="<?php echo $gpfad ?>" style="width: 163px; height: 163px;" alt="no created big-manager"><br /><br />Vergiss nicht dein Managbild zu speichern. Rechtsklick » Bild speichern unter...<br /><br />Das kleine Bild ist für das Browsergame, das große fürs Forum.</td>
</tr>
<tr>
<td>Kleidungfarbe</td>
<td>
<label>
<select name="kleidungsfarbe" class="form_dropdown">
<option>Deine Wahl...</option>
<option>Schwarz</option>
<option>Grün</option>
<option>Blau</option>
<option>Gelb</option>
<option>Rot</option>
</select>
</label></td>
<td> </td>
</tr>
<tr>
<td>Haartyp</td>
<td>
<label>
<select name="haartyp" class="form_dropdown">
<option>Glatze</option>
<option>Haartyp 1</option>
<option>Haartyp 2</option>
<option>Haartyp 3</option>
<option>Haartyp 4</option>
<option>Haartyp 5</option>
</select>
</label></td>
<td> </td>
</tr>
<tr>
<td>Haarfarbe</td>
<td>
<label>
<select name="haarfarbe" class="form_dropdown">
<option>keine</option>
<option>Blond</option>
<option>Braun</option>
<option>Schwarz</option>
<option>Rot</option>
<option>Grau</option>
</select>
</label></td>
<td> </td>
</tr>
<tr>
<td>Assessoire</td>
<td>
<label>
<select name="sonstiges" class="form_dropdown">
<option>keines</option>
<option>Brille 1</option>
</select>
</label></td>
<td> </td>
</tr>
<tr>
<td>Cap</td>
<td>
<label>
<select name="cappy" class="form_dropdown">
<option>keine</option>
<option>Cap 1</option>
</select>
</label></td>
<td> </td>
</tr>
<tr>
<td>Capfarbe</td>
<td>
<label>
<select name="cappycolor" class="form_dropdown">
<option>Deine Wahl...</option>
<option>Schwarz</option>
<option>Grün</option>
<option>Blau</option>
<option>Gelb</option>
<option>Rot</option>
</select>
</label></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5">
<label><input type="submit" name="genbutton" id="form_button" value="Managerbild generieren"></label></td>
</tr>
</table>
</form>
<br><br>
[/src]

ich bedanke mich schon mal im Vorraus

 

[KingJamez]

Wenn es rein Clientseitig laufen soll würde ich es grundlegend mit

You do not have permission to view link please Anmelden or Registrieren

machen. Ein Canvas in ein Bild zu wandeln geht mit

[src=javascript]
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
[/src]

 

[venom2k6]

schon mal vielen dank für deine Antwort. in HTML5 arbeite ich mich gerade langsam ein und habe von Canvas ein bisschen gelesen.
kann ich mittels diesem Objekt auch mehre Grafiken zusammenfügen wie bei der imagecopy()-PHP funktion?

 

[KingJamez]

<canvas> ist eine Leinwand, du kannst dort Objecte zeichnen oder Bilder hineinladen, du kannst natürlich auch mehrere Bilder hineinladen.

ein auszug
[src=javascript]
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 903;
canvas.height = 657;
var background = new Image();
background.src = "http://www.samskirrow.com/background.png";
background.onload = function(){
ctx.drawImage(background,0,0);
}

// Draw whatever else over top of it on the canvas.
[/src]

You do not have permission to view link please Anmelden or Registrieren

Ich verstehe nicht ganz warum du von deiner aktuellen Technik weg willst, warum arbeitest du nicht mit AJaX um es etwas dynamischer zu machen? Denke das wäre einfacher und du müsstest dich nicht mit so vielen neuen Techniken auseinandersetzen.

 

[venom2k6]

im grunde gehts mir darum etwas neues zu lernen und den generator moderner wirken zu lassen. fänd ich halt cool wenn man links sachen anklickt und man das ergebnis rechts sofort in echtzeit angezeigt bekommt

 

[KingJamez]

Ohne dein Script ausprobiert zu haben...
Du scheinst dich in die in "imagecopy" Sache ja eingearbeitet zu haben. Deshalb würde ich an deiner Stelle erstmal versuchen auf dieser Basis neben dem Formular das Bild anzeigen zu lassen, was du generiert hast - das ist eine Arbeit von 5 Minuten.
Wenn das funktioniert, nutze einen eventlistener um die Daten mit einem xhr an den Server zu senden. Gib das generierte Bild an den xhr zurück und ersetze ist im DOM.

Das war eine grobe Zusammenfassung, du kannst auch gerne weitere, detailliertere fragen stellen, dann kann man da leichter drauf eingehen.
Ich denke der Canvas weg würde dich in die Verzweiflung treiben. Dazu solltest du Javascript besser kennen.

Um etwas neues zu lernen wäre ein refactor des Scripts auch ganz gut

 

[ragnar]

Ganz klar imagemagick -

You do not have permission to view link please Anmelden or Registrieren