Alternative zu AJAX für dynamische Bilder

**chorn** · 05.01.2012, 12:37

Stichwort "Data-URLs"

**fireweasel** · 05.01.2012, 14:31

Zitat von misterflash Beitrag anzeigen

Hallo Forum!

Ich möchte gerne folgendes machen: Auf eine bestehende Grafik soll per ImageCreateFromPNG bzw. ImageTTFText und ImagePNG ein Text geschrieben werden, der aus einem Textfeld ausgelesen werden soll. Also: Man gibt "Misterflash" ein und dann wird dieser Text, nachdem man auf einen Button geklickt hat, auf die Grafik draufgeschrieben.

Das Erstellen der Grafik funktioniert schon, wenn ich den Text als Variable direkt in das Image-Script hinein schreibe. Nun wollte ich das ganze per AJAX machen, um die Seite nicht komplett reloaden zu müssen, allerdings macht mir da das Attribut "xmlhttp.responseText" im AJAX-Script einen Strich durch die Rechnung - anscheinend ist das generell ein Problem, da ich dazu im Netz mehrere Posts gefunden habe.

Was ich bis jetzt geschafft habe:
- Erstellen der Grafik plus dem gewünschten Text, wenn er in einer Variable steht
- Übergeben eines Wertes aus einem Textfeld per POST und per AJAX an das Script, das die Grafik erzeugt

Letztendlich funktioniert anscheinend mein Weg bis dahin, wo die Grafik per image-Tag eingebunden werden soll, denn dort bekomme ich nur einen Haufen Sonderzeichen (vermutlich, weil meine Grafik als String ausgegeben wird - wegen reponseText-Attribut).

Nun möchte ich fragen, ob jemand eine gute Idee hat, wie ich diesen Plan realisieren kann.

Klassisches JavaScript (ohne AJAX) kennt das Image-Objekt mit der Eigenschaft "src". Die zeigt auf die URL der Bilddatei. Änderst du die URL, wird ein 08/15-konfigurierter Webbrowser die neue URL vom Server anfordern und das dahinterliegende Bild darstellen. Das geht auch mit Nicht-PNG-Formaten. Du musst nur darauf achten, dass du stets andere URLs erzeugst, damit der Client die als "neu" erkennt und nicht aus dem Cache holt. Das Anhängen eines Zählers oder einer Zufallszahl per Query-Parameter ist dafür wohl die gängige Vorgehensweise.

Ansonsten erläutern diverse Artikel, wie man mit modernen, aber auch etwas betagteren Browsern an Binärdaten kommen kann.

HTML5 Rocks - New Tricks in XMLHttpRequest2 (Abschnitt: "Fetching Data")

Interacting With The Web: The XMLHttpRequest Object - Google Desktop APIs - Google Code

https://developer.mozilla.org/En/XML...ng_binary_data

https://developer.mozilla.org/en/Cod...loading_Images

Die beiden MDN-Seiten geben bei mir wunderliche rote Exception-Meldungen statt der Beispiel-Sources aus. Vielleicht ist es bei dir ja anders. Den auf der ersten MDN-Seite verlinkten, aber nicht mehr existierenden Blogeintrag, der sich mit älteren Browsern (Stand 2006) beschäftigt, gibts auf archive.org:

http://web.archive.org/web/200808210...eams-with.html
(aktuellste Version, die ich finden konnte)

**misterflash** · 12.01.2012, 18:47

Erstmal danke an euch beide für eure Antworten und entschuldigt bitte die späte Rückmeldung - hatte diese Woche nicht viel Zeit und wollte außerdem alle Lösungsvorschläge ausprobieren, bevor ich mich zurück melde - also:

1. Die Lösung mit dem Ändern des src-Attributs fällt für mich weg, da ich viele Daten an mein PHP-Script, das per AJAX aufgerufen wird, übergeben möchte - und dazu benötige ich POST.

2. ich habe mich nun mit den übrigen Links beschäftigt. Die Sache mit dem ResponseType "arraybuffer" und "Response" anstatt von "ResponseText" löst mein Problem leider nicht - da bekomme ich nicht nur die ganzen Sonderzeichen (die Binärdaten meines Bildes, nehme ich an), sondern überhaupt kein Ergebnis.

3. Ich habe mir nun einen neuen Lösungsweg überlegt:
index.php = Hauptseite, die per AJAX die Datei "createimage.php" aufruft.
createimage.php = erzeugt das neue Bild.

In meinem PHP-Script, das die Grafik erzeugt, lasse ich mir das neu generierte Bild nicht direkt ausgeben, sondern speichere es als Datei ab. Das funktioniert auch mit meinen POST-Daten wunderbar.
Mein Problem ist nun, dass ich es ja auch direkt, nachdem AJAX fertig ist, das neue Bild auch anzeigen möchte. Der theoretische Weg war folgender: Zuerst Bild erzeugen und in Datei abspeichern, dann in die Hauptseite einbinden. Mein Problem ist aber nun, dass anscheinend das Bild nicht fertig wird, bis es per img-Tag in die Hauptseite eingebunden wird. Anscheinend bringt die IF-Abfrage im AJAX-Script nach "readystate = 4" nicht den gewünschten Effekt.
Nun habe ich mir folgenden Ansatz überlegt: Man tippt den Text ins Textfeld ein > wird per AJAX an createimage.php übergeben > erzeugt neue Grafik mit dem Text. In der Datei createimage.php wird, nachdem die Grafik erfolgreich erzeugt wurde, eine Javascript-Funktion aufgerufen, die in der Hauptdatei (index.php) steht. Diese Funktion lädt das neu generierte Bild per src-Attribut neu - denkt ihr, dass das funktionieren könnte?

Mein Problem ist nun, dass anscheinend Javascripts in Dateien, die per AJAX in eine Datei geladen werden, nicht ausgeführt werden und per eval() erst ausgeführt werden müssen. Wie stelle ich das nun an?

In der Hauptdatei (index.php) steht also die Funktion "reloadImage(File)" und in der createimage.php-Datei steht dann der Aufruf "reloadImage('neuedatei.png');". Wo muss die eval-Anweisung dann stehen?

Für jeden weiteren Tipp bin ich dankbar

Misterflash

**AmicaNoctis** · 12.01.2012, 20:23

Hallo,

wenn du per AJAX POST ein PHP-Script ansteuerst, welches das Bild erzeugt und abspeichert, wird der AJAX-Request erst fertig beantwortet, wenn PHP damit fertig ist. Solange du also das src-Attribut des img-Elements nicht vor dem readyState 4 änderst, sollte das alles klappen. Pack den Code dazu einfach in die onreadystatechange-Funktion innerhalb von [FONT="Courier New"]if (client.readyState == 4)[/FONT]. Eigentlich musst du das sowieso, denn PHP muss dir ja als Antwort irgendwie mitteilen, wie das generierte Bild heißt, oder?

Edit: Sorry, ich hab den Teil gerade irgendwie überlesen, in dem du schreibst, dass du es genau so machst. Kann es sein, dass die Bild-URL nicht stimmt? Denn eigentlich sollte das Bild im readyState 4 existieren.

Gruß,

Amica

**boeserfrosch** · 12.01.2012, 21:48

Zitat von misterflash Beitrag anzeigen

"readystate = 4"

Kann es sein das du das so wirkich in deinem Skript stehen hast?
Wenn ja änder es in readystate == 4
denn sonst ist es kein Wunder das nicht darauf gewartet wird bis das Bild erstellt wurde.

**AmicaNoctis** · 12.01.2012, 22:36

readyState (mit großem S)!

**fireweasel** · 13.01.2012, 16:22

Zitat von misterflash Beitrag anzeigen

...

1. Die Lösung mit dem Ändern des src-Attributs fällt für mich weg, da ich viele Daten an mein PHP-Script, das per AJAX aufgerufen wird, übergeben möchte - und dazu benötige ich POST.

...

Was hat das eine mit dem anderen zu tun?

Dein JavaScript schickt die POST-Daten an das PHP-Server-Script. Das erzeugt die neue Bilddatei und speichert diese unter einem eindeutigem Namen. Den gibt das PHP-Script an das aufrufende JavaScript zurück. Das aktualisiert die URL zur Bilddatei (die in dem Moment sicher existiert). Mehr brauchts eigentlich nicht ...

B.T.W.:

Code:

client.readyState == 4

ein Ausdruck, der true oder false liefert.

Code:

client.readyState = 4

ein Ausdruck, der 4 liefert und hoffentlich eine Meldung im Error-Log hinterlässt, weil die Variable read-only sein müsste.

Code:

client.readystate = 4

ein Ausdruck, der 4 liefert und eine Variable .readystate mit dem Wert 4 erzeugt (sofern sie nicht schon vorher existierte).

Es könne sich als hilfreich erweisen, wenn du dein Wissen
* über die Funktion assoziativer Arrays (oder Objekte) in Javascript und
* über Fallstricke bei der Ausdrucks-Auswertung in von C abgeleiteten Sprachen
erweiterst.

**misterflash** · 20.01.2012, 18:00

Hallo!

Habe nun nach einer Woche (hatte immer nur am Abend ein bisschen Zeit) die ganze Sache hinbekommen. Der Weg, den ich gewählt habe ist nun so, wie der, den ich in meinem letzten Post beschrieben habe, also:

User gibt Daten ins Textfeld ein > wird per AJAX an bild-erzeugende-PHP-Datei geschickt > sobald Bild erzeugt wurde gibt dieses einen Javascript-Funktionsaufruf zurück, dessen Funktion die Quelle für das Bild mittels des src-Attributs verändert - passt!

Ich habe das schlampig geschrieben "readystate = 4" steht bei mir im Script als "readyState == 4" - also bei der IF-Abfrage, ob die Daten schon geladen wurden.

Nun habe ich nur mehr das Problem, dass mein AJAX-Script zwar wunderbar im Firefox, nicht aber im Internet Explorer funktioniert. Wenn ich mir die Variable "response" ausgeben lasse, der als Wert "xmlhttp.responseText" zugewiesen ist, erhalte ich einen leeren Wert. Mache ich das im Firefox, erhalte ich genau das, was ich zurück bekommen sollte - nämlich den Funktionsaufruf für das Javascript.

Hat jemand eine Idee, worauf ich da achten müsste? Habe es im IE 8 getestet.

Misterflash

**AmicaNoctis** · 21.01.2012, 11:31

IE8 hat einen eingebauten Debugger, der zwar nicht so cool ist wie Firebug, aber trotzdem hilfreich bei diesem Problem sein sollte. Setz einen Breakpoint innerhalb des if (xmlhttp.readyState == 4) {}-Blocks und analysier dein xmlhttp-Objekt. Wenn das Problem sich auf diese Weise nicht lösen lässt, poste bitte nochmal den aktuellen relevanten Code dazu.

Alternative zu AJAX für dynamische Bilder