php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Scripts > BRAINSTORMING PHP/SQL/HTML/JS/CSS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


BRAINSTORMING PHP/SQL/HTML/JS/CSS Ihr habt eine Idee, aber keinen genauen Ansatz? Diskutiert mit anderen Usern des Forums über eure Gedankengänge um evtl. hilfreiche Ideen zu bekommen!
Normale Fragen bitte weiterhin in die entsprechenden Foren!

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 1 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 05-01-2012, 12:07
misterflash
 Registrierter Benutzer
Links : Onlinestatus : misterflash ist offline
Registriert seit: Jan 2012
Beiträge: 3
misterflash befindet sich auf einem aufstrebenden Ast
Standard Alternative zu AJAX für dynamische Bilder

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.

Danke! Misterflash
Mit Zitat antworten
  #2 (permalink)  
Alt 05-01-2012, 12:37
chorn
 Registrierter Benutzer
Links : Onlinestatus : chorn ist offline
Registriert seit: Nov 2011
Beiträge: 126
chorn befindet sich auf einem aufstrebenden Ast
Standard

Stichwort "Data-URLs"
Mit Zitat antworten
  #3 (permalink)  
Alt 05-01-2012, 14:31
Benutzerbild von fireweasel fireweasel
 Registrierter Benutzer
Links : Onlinestatus : fireweasel ist offline
Registriert seit: Sep 2008
Ort: At home
Beiträge: 851
fireweasel wird schon bald berühmt werdenfireweasel wird schon bald berühmt werden
fireweasel eine Nachricht über AIM schicken fireweasel eine Nachricht über Yahoo! schicken
Standard

Zitat:
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)

Geändert von fireweasel (05-01-2012 um 14:39 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 12-01-2012, 18:47
misterflash
 Registrierter Benutzer
Links : Onlinestatus : misterflash ist offline
Registriert seit: Jan 2012
Beiträge: 3
misterflash befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 12-01-2012, 20:23
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

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 if (client.readyState == 4). 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
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #6 (permalink)  
Alt 12-01-2012, 21:48
boeserfrosch
 Registrierter Benutzer
Links : Onlinestatus : boeserfrosch ist offline
Registriert seit: Nov 2009
Beiträge: 93
boeserfrosch befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 12-01-2012, 22:36
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

readyState (mit großem S)!
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 13-01-2012, 16:22
Benutzerbild von fireweasel fireweasel
 Registrierter Benutzer
Links : Onlinestatus : fireweasel ist offline
Registriert seit: Sep 2008
Ort: At home
Beiträge: 851
fireweasel wird schon bald berühmt werdenfireweasel wird schon bald berühmt werden
fireweasel eine Nachricht über AIM schicken fireweasel eine Nachricht über Yahoo! schicken
Standard

Zitat:
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.

Geändert von fireweasel (13-01-2012 um 16:47 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 20-01-2012, 18:00
misterflash
 Registrierter Benutzer
Links : Onlinestatus : misterflash ist offline
Registriert seit: Jan 2012
Beiträge: 3
misterflash befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #10 (permalink)  
Alt 21-01-2012, 11:31
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dynamische Bilder - Spamschutz bofan PHP Developer Forum 5 06-09-2009 18:10
js: dynamische Bilder abfragen strassencoder HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 15 21-08-2007 17:07
dynamische Bilder erzeugen amo PHP Developer Forum 4 13-11-2005 11:43
dynamische bilder Realmaker PHP Developer Forum 1 01-03-2003 20:56
GD ein muss für dynamische Bilder ? sasleia PHP Developer Forum 1 10-06-2002 20:46

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 01:13 Uhr.