• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

PHP Imagecopy() alternative >> Javascript?

venom2k6

NGBler

Registriert
15 Juli 2013
Beiträge
107
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 :D

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:
big10-31-08.png

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:
[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

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
Wenn es rein Clientseitig laufen soll würde ich es grundlegend mit Canvas 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

NGBler

Registriert
15 Juli 2013
Beiträge
107
  • Thread Starter Thread Starter
  • #3
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

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
<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]
quelle

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

NGBler

Registriert
15 Juli 2013
Beiträge
107
  • Thread Starter Thread Starter
  • #5
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

Aktiver NGBler

Registriert
18 Juli 2013
Beiträge
501
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 ;)
 
Oben