Bild gernerieren via Submit-Button

[Dutschi]

Hallo,

ich würde gerne diese Spielerei nachbauen:

http://nulpe.nu.ohost.de/

http://1.fcm-live.de/utils/aufstellungsbild/

Es geht mir erst einmal darum, wie ich mit einem Submit-Button ein Bild generieren kann. Ich weiß nicht so recht, wonach ich suchen soll, die Quelltexte haben mir noch nicht geholfen. Gibt es Stichworte, die zum Ziel führen? Es gibt doch bestimmt halbwegs fertige Skripte, die man dann noch entsprechend anpassen kann - aber wie heißen die?

Vielen Dank!

[Frank (no reg)]

Hi,

und was genau macht ein Submit-Button?

Richtig, er sorgt dafür, dass vom Browser ein Post/Get/Put/Delete Request an den Server geschickt wird.

Und was macht ein Server, wenn er einen Request bekommt?

Wieder richtig, er beantwortet ihn.

Wenn das Bild dynamisch erstellt werden muss, dann schaut der Webserver vielleicht nicht nach ob da eine fertige Bilddatei existiert sondern leitet die Anfrage einfach an ein Script weiter (Stichwort: URL Rewrite), welches dann Bytes erzeugt und an den Webserver zurückgibt: "Hier sind ein paar Bytes, gib die als Antwort auf die Anfrage an den Browser zurück .... und sag ihm, es sei ein JPG-Bild".

Wie kann ein PHP Script nun dynamisch ein Bild erstellen?

LMGTFY: php dynamisch grafik erstellen

Ciao, Frank

[Der-Dennis]

Hallo Dutschi!

Es geht mir erst einmal darum, wie ich mit einem Submit-Button ein Bild generieren kann.

Gar nicht. Ein Submit-Button sendet lediglich Daten aus einem Formular an den Server.

Ich weiß nicht so recht, wonach ich suchen soll, die Quelltexte haben mir noch nicht geholfen.

Die Quelltexte geben Dir in der Regel keine Auskunft darüber, wonach Du suchen sollst.
In diesem Fall findest Du aber schon ein paar Hinweise: HTML, JavaScript, JQuery, PHP, ...

Gibt es Stichworte, die zum Ziel führen?

Siehe den Absatz zuvor.

Es gibt doch bestimmt halbwegs fertige Skripte, die man dann noch entsprechend anpassen kann - aber wie heißen die?

Für spezielle Anwendungsfälle gibt es meist keine fertigen Skripte. Bevor Du allerdings nach einem allgemeinen Skript suchst und dies anpassen möchtest, solltest Du Dich erst einmal mit den Grundlagen von oben genannten Stichworten vertraut machen.

Gruß, Dennis

[Dutschi]

Hi,

danke für die Antworten.

Die Quelltexte geben Dir in der Regel keine Auskunft darüber, wonach Du suchen sollst.

Das sehe ich ganz anders. Wenn eine Geschichte in JS umgesetzt wird und man sich den .js-Schnipsel ansehen kann, ist das in der Regel die halbe Miete.

In diesem Fall findest Du aber schon ein paar Hinweise: HTML, JavaScript, JQuery, PHP, ...

Jetzt lehne ich mich mal aus dem Fenster: Wenn man mir unten rät, mich mit den Grundlagen vertraut zu machen, sollte man solche Sätze auch vermeiden. Dass man HTML im Quelltext findet, naja, findet man im Schokoladenmuseum Schokolade? Findet man im Kindergarten Kinder?
Php-Code habe ich übrigens bei der Anzeige des Quelltextes noch nie gefunden, ein paar Kommentare mal ausgenommen.

Gibt es Stichworte, die zum Ziel führen?
Siehe den Absatz zuvor.

JQuery bezieht sich bei dieser Geschichte doch eher auf die drag&drop-Funktion. Wenn ich HTML in Google eingebe, werde ich für mein spezielles Problem wohl kaum eine Lösung finden, ebensowenig "JavaScript" und "PHP".

Für spezielle Anwendungsfälle gibt es meist keine fertigen Skripte. Bevor Du allerdings nach einem allgemeinen Skript suchst und dies anpassen möchtest, solltest Du Dich erst einmal mit den Grundlagen von oben genannten Stichworten vertraut machen.

Das sollten wir dann wohl zusammen tun. Nur weil die etablierte Gemeinde hier im Forum, die nun wirklich teilweise krasses Wissen hat, mit diesen Sätze glänzen kann, sollte man das nicht auch für sich in Anspruch nehmen.

[Der Martin]

Hallo,

Die Quelltexte geben Dir in der Regel keine Auskunft darüber, wonach Du suchen sollst.
Das sehe ich ganz anders. Wenn eine Geschichte in JS umgesetzt wird und man sich den .js-Schnipsel ansehen kann, ist das in der Regel die halbe Miete.

das ist natürlich richtig. Aber die Formularverarbeitung findet in aller Regel auf dem Server statt und ist daher nicht im browserseitigen Quelltext auffindbar - nur das form-Element, und damit die URL des verarbeitenden Scripts.

In diesem Fall findest Du aber schon ein paar Hinweise: HTML, JavaScript, JQuery, PHP, ...

Das hilft natürlich überhaupt nicht weiter.

Jetzt lehne ich mich mal aus dem Fenster: Wenn man mir unten rät, mich mit den Grundlagen vertraut zu machen, sollte man solche Sätze auch vermeiden.

Richtig. Kann sein, dass ich mich irre - aber die Art deiner Fragestellung lässt mich vermuten, dass du in der Thematik (noch) ziemlich unerfahren bist. Dann sind solche Allgemeinplätze wie "Lerne erstmal die Grundlagen" zwar nicht falsch, helfen aber auch nicht wirklich weiter.

Dass man HTML im Quelltext findet, naja, findet man im Schokoladenmuseum Schokolade? Findet man im Kindergarten Kinder?

Findet man im Hundekuchen Hunde? Findet man im Hausanzug Häuser? ;-)

Php-Code habe ich übrigens bei der Anzeige des Quelltextes noch nie gefunden, ein paar Kommentare mal ausgenommen.

Klar, PHP wird vom Webserver verarbeitet und ausgeführt; im Browser-Quelltext siehst du dann nur noch das, was das PHP-Script als HTML-Ausgabe erzeugt hat. Die Kommentare, die du erwähnst, sind dann aber auch HTML-Kommentare.

JQuery bezieht sich bei dieser Geschichte doch eher auf die drag&drop-Funktion. Wenn ich HTML in Google eingebe, werde ich für mein spezielles Problem wohl kaum eine Lösung finden, ebensowenig "JavaScript" und "PHP".

So allgemeine Suchbegriffe helfen ebensowenig, wie wenn du in eine Bibliothek gehst und sagst, "Ich suche ein Buch." Da muss man schon etwas spezifischer werden.

[...] solltest Du Dich erst einmal mit den Grundlagen von oben genannten Stichworten vertraut machen.
Das sollten wir dann wohl zusammen tun.

Ja und nein. Etwas Grundwissen zu den Bereichen, die du anwenden willst, solltest du dir schon selbst erarbeiten. Mit gezielten Fragen oder konkreten Problemen bist du hier aber gern willkommen - nicht jedoch mit der Einstellung "ich hätte gern ... macht mir das jemand mal schnell".

Zurück zum eigentlichen Thema: Du hast ein Formular, das abgesendet wird, und dessen Antwort vom Server eine Bild-Ressource sein soll. Die Aufgabe gliedert sich also in zwei Teile:
a) das HTML-Formular erstellen (sollte trivial sein, meine ich)
b) das Script schreiben, das die Verarbeitung der Daten auf dem Server übernimmt

Der Anfang für Schritt b) sollte ein Konzept sein:
 * Woraus wird das Bild erzeugt? (Bildvorlage? Wie manipuliert?)
 * Welche Parameter muss das HTML-Formular dafür liefern?
 * Wie sehen (in Worten!) die Verarbeitungsschritte für die Erzeugung des Bildes aus?
 * In welchem Format soll das Bild ausgeliefert werden? (JPEG, PNG, GIF, Palette, Truecolor)

Dieses Script willst du vermutlich in PHP schreiben, obwohl es viele andere Möglichkeiten gibt - aber PHP ist wohl am populärsten und am weitesten verbreitet. Wenn dein grobes Konzept steht und vielleicht sogar schon ein paar Zeilen Code, dann treffen wir uns hier wieder, um ins Detail zu gehen.

So long,
 Martin

[Der-Dennis]

Hey,

Die Quelltexte geben Dir in der Regel keine Auskunft darüber, wonach Du suchen sollst.

Das sehe ich ganz anders. Wenn eine Geschichte in JS umgesetzt wird und man sich den .js-Schnipsel ansehen kann, ist das in der Regel die halbe Miete.

Du kannst Dir die JavaScript-Schnipsel doch anschauen? Da gibt's die Dateien, die im HTML-Head eingebunden sind und die JS-Funktionen im Frame.

Jetzt lehne ich mich mal aus dem Fenster: Wenn man mir unten rät, mich mit den Grundlagen vertraut zu machen, sollte man solche Sätze auch vermeiden. Dass man HTML im Quelltext findet, naja, findet man im Schokoladenmuseum Schokolade? Findet man im Kindergarten Kinder?

Du machst genau das, was Du anprangerst.

Php-Code habe ich übrigens bei der Anzeige des Quelltextes noch nie gefunden, ein paar Kommentare mal ausgenommen.

Ich habe ja auch nicht von Code gesprochen. Man sieht aber im Quelltext, dass zur Bild-Generierung eine PHP-Datei aufgerufen wird. Hättest Du den Quelltext wie zuvor beschrieben tatsächlich durchgearbeitet, wäre Dir das sicher aufgefallen. Und wenn es Dir nicht aufgefallen ist, kann ich nur an die Grundlagen appellieren!

JQuery bezieht sich bei dieser Geschichte doch eher auf die drag&drop-Funktion.

Richtig. Aber laut Deiner Frage gehört Drag-and-Drop doch dazu!? Das schließe ich zumindest aus "ich möchte das nachbauen" aus Deinem Eröffnungspost.

Wenn ich HTML in Google eingebe, werde ich für mein spezielles Problem wohl kaum eine Lösung finden, ebensowenig "JavaScript" und "PHP".

Das ist richtig. Es geht hier aber um die Grundlagenkenntnisse.

Für spezielle Anwendungsfälle gibt es meist keine fertigen Skripte. Bevor Du allerdings nach einem allgemeinen Skript suchst und dies anpassen möchtest, solltest Du Dich erst einmal mit den Grundlagen von oben genannten Stichworten vertraut machen.

Das sollten wir dann wohl zusammen tun. Nur weil die etablierte Gemeinde hier im Forum, die nun wirklich teilweise krasses Wissen hat, mit diesen Sätze glänzen kann, sollte man das nicht auch für sich in Anspruch nehmen.

Damit will ich keinesfalls glänzen, es ist nur ein gut gemeinter Rat. Ich will Dir damit ja auch nicht auf den Schlips treten, aber was Du da nachbauen möchtest ist schon recht komplex: Ein Zusammenspiel aus HTML, JS, PHP und so weiter: die oben benannten Stichworte eben.
Wenn man nun aber schon "Probleme" bei einem Submit-Button hat, sehe ich keine Möglichkeit oben genanntes ohne Vertiefung der Grundlagen zu bewerkstelligen.

Wenn Du Dich zuerst damit beschäftigst, helfe ich Dir ja gerne bei weiterem Vorgehen und auch beantworte ich Dir - genauso wie die anderen hier im Forum - gerne eventuell aufkommende Fragen beim Erlernen der Grundlagen.

Gruß, Dennis

[Beat]

Das sollten wir dann wohl zusammen tun. Nur weil die etablierte Gemeinde hier im Forum, die nun wirklich teilweise krasses Wissen hat, mit diesen Sätze glänzen kann, sollte man das nicht auch für sich in Anspruch nehmen.

Gehen wir mal die Sache an:

Die besagte Geschichte hat zwei Seiten:
Eine Frontendseite. Diese ist eigentlich trivial.
Sie führt im Ergebnis zu einem Querystring, der eine Liste von Bildbezeichnern, Layoutbezeichner und Size enthält.

Dann ist die Serverseitige Geschichte.
Hier müssen auf Grund der Bildbezeichner Bilddaten geholt werden,
Auf der Grundlage der Layoutinformation müssen koordinaten erstellt werden,
Und dann muss eine Graafikbibliothek aufgerufen werden, welche in der Lage ist, die Bilddaten mit den Koordinaten auf einem einzigen Bild zu montieren.

Ob du nun Php, Perl oder eine andere Technik einsetzt, ist egal. Du musst auf dem Server auf jeden Fall Zugang zu einer solchen Bibliothek haben, und das ist nicht immer gegeben.

Schauen wir, wie wir das ergoogeln können:
Php images combine overlapping GD

So als kleiner Keyword-Vorschlag.
sollte dich zu geeigneten Klassen oder Tutorials führen.

mfg Beat