[FRAGE] Avatar Generator - Mehr Bilder einfügen wie?

[fancy]

Guten Tag,

ich bin relativ neu in JS jedoch sehr Lern interessiert. Ich habe mit freunden ein Avatar Generator erstellt.
Jedoch möchten wir mehr als nur ein Bild wiedergeben bzw. anzeigen. Am besten fall wollen wir eine auswahl erstellen
womit man sich dann ein Bild aussuchen kann.

Jedoch weiß keiner von uns wie wir das erstellen müssen, um mehr bilder anzeigen zu lassen oder eine auswahl zu erstellen.

Hier ist mein Code

<?php
// Font
$fontname = 'font/OpenSans-Bold.ttf';
// Platz zwischen den Texten
$i        = 30;
//JPG qualität 1-100
$quality  = 90;

function create_image($user)
{
    global $fontname;
    global $quality;
    $file = "covers/" . md5($user[0]['name'] . $user[1]['name'] . $user[2]['name']) . ".jpg";
    // wenn datei exestiert -> ersetzten	
    //if (!file_exists($file)) {	
    // Main Avatar
    $im = imagecreatefromjpeg("pass2.jpg");
    // Farben
    $color['grey']  = imagecolorallocate($im, 54, 56, 60);
    $color['green'] = imagecolorallocate($im, 55, 189, 102);
	$color['white'] = imagecolorallocate($im, 255, 255, 255);
	$color['black'] = imagecolorallocate($im, 0, 0, 0);
	$color['blau'] = imagecolorallocate($im, 29, 126, 182);
    $y = imagesy($im) - $height - 25;	
    foreach ($user as $value) {
        // Zentriert den Text
        $x = center_text($value['name'], $value['font-size']);
        imagettftext($im, $value['font-size'], 0, $x, $y + $i, $color[$value['color']], $fontname, $value['name']);
        //32px Line-Height
        //$i = $i + 32;
    }
    imagejpeg($im, $file, $quality);
    return $file;
}

function center_text($string, $font_size)
{
    global $fontname;
    $image_width = 192;
    $dimensions  = imagettfbbox($font_size, 0, $fontname, $string);
    return ceil(($image_width - $dimensions[4]) / 2);
}

$user = array(
    array(
        'name' => 'Nickname',
        'font-size' => '16',
        'color' => 'blau'
    )
);

if (isset($_POST['submit'])) {
    $error = array();
    if (strlen($_POST['name']) == 0) {
        $error[] = 'Nickname eingeben!';
    }
    if (count($error) == 0) {
        $user = array(
            array(
                'name' => $_POST['name'],
                'font-size' => '16',
                'color' => 'blau'
            )
        );
    }
}
$filename = create_image($user);
?>

Und hier wird es ausgerufen bzw. angezeigt auf der Website:

<img class="avatar" src="<?= $filename; ?>?id=<?= rand(0, 1292938); ?>" width="192" height="192"/>
		<ul>
			<?php
				if (isset($error)) {
					foreach ($error as $errors) {
						echo '<li>' . $errors . '</li>';
				
					}
				}
			?>
		</ul>
		<center>
			<div class="dynamic-form">
				<form action="" method="post">
					<h3>Gebe hier dein Nickname ein!</h3><br class="hide-mobile">
						<input type="text" value="<?php
							if (isset($_POST['name'])) {
								echo $_POST['name'];
							}
						?>" name="name" maxlength="14" placeholder="Name"><br/><br/>
					<input name="submit" type="submit" class="btn btn-primary" value="Avatar erstellen" />
				</form>
			</div>
			</center>

 

[SteelWheel]

Guten Tag,

Hi ... und willkommen hier im Forum!

ich bin relativ neu in JS ...

Egal!

jedoch sehr Lern interessiert.

Das ist wichtig!

Ich habe mit freunden ein Avatar Generator erstellt. Jedoch möchten wir mehr als nur ein Bild wiedergeben bzw. anzeigen. Am besten fall wollen wir eine auswahl erstellen
womit man sich dann ein Bild aussuchen kann.

Die Brücke bekomme ich nicht geschlagen. Ihr erstellt quasi ein JPG aus "pass2", legt zentriert einen Text drüber und speichert den in das Verzeichnis "covers". Soweit, so naja ... und nun? Also ich sehe zwei Optionen:
1) Der User soll vor Erstellung ein anderes Motiv wählen - statt "pass2". Hierzu bereitet ihr entsprechende Bilder vor, gebt dem User eine Auswahlmöglichkeit (unter "Gebe hier Deinen Nickname ein!") und der Server wählt simpel die selektierte Vorlage für imagecreatefromjpg.
2) Der User soll mehrere Entwürfe von sich speichern können - hierzu müsstet ihr einfach nur $file (mit der "covers"-Angabe) um einen Zeitstempel erweitern (unverschlüsselt!), damit sich die Bilder im Verzeichnis unterscheiden und nicht überschrieben werden. Das Auslesen erfolgt dann über Directory-Iterator und nuuuur über den Teil vor dem Zeitstempel. Die Syntax der Datei könnte so aussehen:

$file = "covers/" . md5($user[0]['name'] . $user[1]['name'] . $user[2]['name']) . "_" . time() . ".jpg";

Beim Iterieren durchs Verzeichnis nehmt ihr jedes File "mit", was

substr_count(md5($user[0]['name'] . $user[1]['name'] . $user[2]['name'])) === 1

hat und befüllt damit ein Array (da steht dann die Information für das "src"-Attribut eines img-Tags drin).

Öhm ... aber wie gesagt ... ich verstehe die Anforderung nur bedingt.

Beste Grüße in die Nacht - und viel Erfolg.



EDIT: Dass ihr mir aber nicht in einer Schleife je Dateivergleich einen neuen md5() meint berechnen zu müssen - na na na ... das ist pfui!