• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Eingebundenes Bild an Server senden

Hallo-Welt

Hallo-Welt

Aktives Mitglied
Hallo,

Ich suche gerade nach einem Weg, wie ich ein bereits in HTML eingebundenes Bild mittels POST-Funktion an den Server senden kann. ich will also keinen Bilduploader machen - ich weiß wie das geht. Ich würde gerne ein ganz normales mit dem img-Tag eingebundenes Bild mit Klick auf den Submit-Buutton an den Server senden. Geht das irgendwie mit HTML, oder müsste man das mit JavaScript irgendwie realisieren?

Ich danke für jede Antwort.

PS: Bitte fragt mich nicht nach dem Hintergrund. Ich weiß, dass sich mein Vorhaben idiotisch anhört, es macht aber Sinn, glaubt mir.
 
Hallo,

Selbst mit JS wird das kaum was da ja ein Bildupload haben müstest und dies kannst nicht per js befüllen da dies ja ein große schwachstelle in jedem system bedeuten würde.

Du könntest aber das formular über eine PHP datei leiten und die tut denn so als wenn das alles per post geschickt hättest und zusätzlich das bild mit senden, ist aber theorie.

Ein bild das auf dem Server liegt per post an den gleichen Server schicken ?!?

Cheffchen
 
Ein bild das auf dem Server liegt per post an den gleichen Server schicken ?!?
Zum Vergrößern anklicken....
Ich weiß, es hört sich bizzar an, es hat allerdings seine Gründe.

Du könntest aber das formular über eine PHP datei leiten und die tut denn so als wenn das alles per post geschickt hättest und zusätzlich das bild mit senden, ist aber theorie.
Zum Vergrößern anklicken....
Ich hab deine Idee leider nicht ganz gut verstanden. Dass ich das Bild mit PHP bearbeiten muss, ist mir schon klar, das ist allerdings nicht das Problem. Ich will das eingebettete Bild überhaupt mal dorthin befördern. Und das erweißt sich als äußerst problematisch, da es natürlich nicht besonders viele Einsatzgebiete für solch eine Funktion gibt, und die daher gerne mal übersehen wird. Hast du denn eine konkrete Idee, wie du dich dafür anlegen Würdest? Würdest mir damit auf jedem Fall sehr weiterhelfen.

PS: Falls du deine Idee schon genannt haben solltest, könntest du sie dann bitte etwas weiter erläutern. ich hab es so nämlich nicht ganz verstanden.
 
Hallo noch mal.

also als idee.
Das Bild muss ja ausgewählt werden, das müsst dann ja per JS(jquery) passieren oder so, wo dann der pfad zum bild dann weiter gesendet wird an eine PHP Datei.
Dann das bild einlesen per file_get_contents und damit hast das in PHP und musst halt schauen was weiter damit passieren soll.

Cheffchen
 
Hallo-Welt schrieb:
Hallo,

Ich suche gerade nach einem Weg, wie ich ein bereits in HTML eingebundenes Bild mittels POST-Funktion an den Server senden kann. ich will also keinen Bilduploader machen - ich weiß wie das geht. Ich würde gerne ein ganz normales mit dem img-Tag eingebundenes Bild mit Klick auf den Submit-Buutton an den Server senden. Geht das irgendwie mit HTML, oder müsste man das mit JavaScript irgendwie realisieren?

Ich danke für jede Antwort.

PS: Bitte fragt mich nicht nach dem Hintergrund. Ich weiß, dass sich mein Vorhaben idiotisch anhört, es macht aber Sinn, glaubt mir.
Zum Vergrößern anklicken....

Eine Möglichkeit wäre:
1. Bild auf <canvas> zeichnen (http://www.w3schools.com/tags/canvas_drawimage.asp same-origin policy beachten)
2. Canvas in base64-String konvertieren (http://tutorials.jenkov.com/html5-canvas/todataurl.html)
3. base64-String an PHP Script übermitteln (zB mit einem hidden <input>)
4. Mit PHP base64 wieder zu Bild umwandlen (http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file)

Ein richtiger Fileupload ist das natürlich nicht.
 
Zuletzt bearbeitet:
@scbawik: Okay, ich hab mal versucht,deiner Anleitung so gut wie möglich zu folgen. Wäre das so korrekt, wenn ich folgendes in der HTML-Datei stehen habe:
HTML: 
<img id="bild" src="meinbild.jpeg" alt="dies ist ein alternativer text" width="0" height="0">
<canvas id="myCanvas" width="250" height="300" style="border:0px;">
Updaten Sie bitte Ihren Browser...</canvas>

<script language="javascript" type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("bild");
ctx.drawImage(img,10,10);
</script>

<script language="javascript" type="text/javascript">
var canvas  = document.getElementById("myCanvas");
var dataUrl = canvas.toDataURL();

document.getElementById("textArea").value = dataUrl;
</script>
<form action="converter.php" method="post">
<p><input name="textArea" id="textArea" type="hidden" /></p>
</form>
und das ganze dann folgendermaßen in ein Bild wieder zurückkonvertieren würde:
PHP: 
$output_file = "mein_ordner";
$base64_string = $_POST["textArea"];
function base64_to_jpeg($base64_string, $output_file) {
  $ifp = fopen($output_file, "wb");

  $data = explode(',', $base64_string);

  fwrite($ifp, base64_decode($data[1]));
  fclose($ifp);

  return $output_file;
}
Jetzt frage ich dich erstens mal: Was ist falsch an diesem Code, bzw. was habe ich übersehen
und zweitens: Habe ich den $base64_string in PHP richtig definier?

Ich wäre dir und jedem anderem User für weitere Hilfe echt dankbar.
 
Hallo-Welt schrieb:
@scbawik: Okay, ich hab mal versucht,deiner Anleitung so gut wie möglich zu folgen. Wäre das so korrekt, wenn ich folgendes in der HTML-Datei stehen habe:
HTML: 
<img id="bild" src="meinbild.jpeg" alt="dies ist ein alternativer text" width="0" height="0">
<canvas id="myCanvas" width="250" height="300" style="border:0px;">
Updaten Sie bitte Ihren Browser...</canvas>

<script language="javascript" type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("bild");
ctx.drawImage(img,10,10);
</script>

<script language="javascript" type="text/javascript">
var canvas  = document.getElementById("myCanvas");
var dataUrl = canvas.toDataURL();

document.getElementById("textArea").value = dataUrl;
</script>
<form action="converter.php" method="post">
<p><input name="textArea" id="textArea" type="hidden" /></p>
</form>
und das ganze dann folgendermaßen in ein Bild wieder zurückkonvertieren würde:
PHP: 
$output_file = "mein_ordner";
$base64_string = $_POST["textArea"];
function base64_to_jpeg($base64_string, $output_file) {
  $ifp = fopen($output_file, "wb");

  $data = explode(',', $base64_string);

  fwrite($ifp, base64_decode($data[1]));
  fclose($ifp);

  return $output_file;
}
Jetzt frage ich dich erstens mal: Was ist falsch an diesem Code, bzw. was habe ich übersehen
und zweitens: Habe ich den $base64_string in PHP richtig definier?

Ich wäre dir und jedem anderem User für weitere Hilfe echt dankbar.
Zum Vergrößern anklicken....

Sehe zwei mögliche Probleme auf den ersten Blick:

1: Es ist schonmal nicht ersichtlich wie das Formular übermittelt wird. Es gibt weder einen HTML-Button, noch ist entsprechendes JS vorhanden welches Daten per AJAX übermittelt oder das Formular abschickt. Wird es überhaupt abgeschickt?
2: Du musst abwarten bis das Bild geladen ist, bevor du es auf ein Canvas zeichnen kannst. (http://stackoverflow.com/questions/2342132/waiting-for-image-to-load-in-javascript)

Ansonsten ist der Code nicht sonderlich sauber, aber das ist für das eigentliche Problem aktuell weniger schlimm.

Kannst ja mal in deinem PHP Code "echo $base64_string" schreiben. Wenn etwas ausgegeben wird, hast du ein PHP-Problem - wenn nicht, hast du ein clientseitiges Problem (Browserkonsole überprüfen!).
 
Ja, den Submit-Button hab ich vergessen Uups :p
Was das mit dem Laden der Grafik angeht: Diese ist sehr klein. Wird dies denn irgendwie Fehler oder ähnliches aufbringen, wenn ich nicht warte, bis die Grafik vollständig geladen worden ist?

Und dann hätte ich noch eine Frage: Wird mit dem Base64-Strig eigentlich auch der Name der Grafik (also z.B. meinbild.jpeg) an den Server übertragen? Denn das ist für mein eigentliches Vorhaben unentbehrlich!!! Wenn ja, wie kann ich diesen Dateinamen, der über die POST-Funktion gesendeten Grafik einlesen?
 
Hallo-Welt schrieb:
Ja, den Submit-Button hab ich vergessen Uups :p
Was das mit dem Laden der Grafik angeht: Diese ist sehr klein. Wird dies denn irgendwie Fehler oder ähnliches aufbringen, wenn ich nicht warte, bis die Grafik vollständig geladen worden ist?

Und dann hätte ich noch eine Frage: Wird mit dem Base64-Strig eigentlich auch der Name der Grafik (also z.B. meinbild.jpeg) an den Server übertragen? Denn das ist für mein eigentliches Vorhaben unentbehrlich!!! Wenn ja, wie kann ich diesen Dateinamen, der über die POST-Funktion gesendeten Grafik einlesen?
Zum Vergrößern anklicken....

Du solltest dich mit dem was du gerade zusammengewürfelt hast, auch näher beschäftigen. Denn wenn du das verstanden hast, könntest du dir deine Fragen selbst beantworten.
Aber ich will mal nicht so sein:

1: Ja, du musst warten bis es geladen ist. Ein Bild wird nicht sofort angezeigt, da vergehen mindestens ein paar Millisekunden. Egal wie klein es ist.
2: Nein, der Name wird nicht übertragen. Hab hier mal ein Beispiel gemacht..:
http://jsfiddle.net/7wAQt/2/
3: Den PHP-Code musst du natürlich entsprechend erweitern. Aber das überlass ich erstmal dir ;)
 
Ja, du musst warten bis es geladen ist. Ein Bild wird nicht sofort angezeigt, da vergehen mindestens ein paar Millisekunden. Egal wie klein es ist.
Zum Vergrößern anklicken....
Ich hab das leider nicht so ganz verstanden. Warum brauche ich JS-Code, der darauf wartet, dass die Grafik geladen ist. Denn wenn die Grafik bereits geladen worden ist, wenn der User auf den Submit-Button drückt (niemand kann innerhalb von wenigen Millisekunden reagieren), verstehe ich nicht, was daran nicht in Ordnung ist. Dann kann das Bild ja konvertiert werden, da es ja bereits geladen worden ist, nicht?

Nein, der Name wird nicht übertragen.
Zum Vergrößern anklicken....
Das wäre aber ein großes Problem. Gibt es denn keine möglichkeit, den Namen der eingebundenen Grafik an den Server zu senden? Denn das ist das allerwichtigste an meinem Vorhaben.

Edit: Ach so, ich hab deinen Code auf JSFiddle jetzt mal ausprobiert. Der überträgt den Dateinamen in das src-Feld. Dann hat sich dieser Punkt meines Problem ja schon mal gelöst. Vielen Dank dafür.
 
Zuletzt bearbeitet:
Hallo-Welt schrieb:
Ich hab das leider nicht so ganz verstanden. Warum brauche ich JS-Code, der darauf wartet, dass die Grafik geladen ist. Denn wenn die Grafik bereits geladen worden ist, wenn der User auf den Submit-Button drückt (niemand kann innerhalb von wenigen Millisekunden reagieren), verstehe ich nicht, was daran nicht in Ordnung ist. Dann kann das Bild ja konvertiert werden, da es ja bereits geladen worden ist, nicht?


Das wäre aber ein großes Problem. Gibt es denn keine möglichkeit, den Namen der eingebundenen Grafik an den Server zu senden? Denn das ist das allerwichtigste an meinem Vorhaben.
Zum Vergrößern anklicken....
Du hast offensichtlich nicht die geringste Ahnung von Javascript oder PHP.

Sieh dir den Link an. Da ist alles gemacht bis auf den PHP-Teil !
 
Ja danke, ist gut. Ich hab es mitlerweile auch gemerkt. (Müsste mal öfters neuladen) o_O

Naja, ich danke dir auf jeden Fall mal für deine Hilfe. Ich denke, dass ich den Rest schaffen werde. Wenn nicht, dann melde ich mich einfach noch mal, gegebenenfalls mit einem neuen Thread.

PS: Bei JS bin ich in der Tat Neuling. Mit PHP gehts.
 
Zuletzt bearbeitet:
@scbawik: Ich bräuchte dann noch mal ganz kurz deine Hilfe. Wenn ich die Grafik nämlich austausche, hab ich hier (<-klickbar) beispielhaft mal mit der Google-Grafik (hab auch schon ganz andere eigene Grafiken genutzt wie auch schon lokal ausprobiert, liegt also nicht an Sperrmechanismen) gemacht, dann funktioniert das ganze Script auf einmal nicht mehr. Woran könnte das liegen?
PS: PHP ist nur als Text gepostet; wird nicht ausgeführt...
 
Hallo-Welt schrieb:
@scbawik: Ich bräuchte dann noch mal ganz kurz deine Hilfe. Wenn ich die Grafik nämlich austausche, hab ich hier (<-klickbar) beispielhaft mal mit der Google-Grafik (hab auch schon ganz andere eigene Grafiken genutzt wie auch schon lokal ausprobiert, liegt also nicht an Sperrmechanismen) gemacht, dann funktioniert das ganze Script auf einmal nicht mehr. Woran könnte das liegen?
PS: PHP ist nur als Text gepostet; wird nicht ausgeführt...
Zum Vergrößern anklicken....

Links im zweiten Select hast du "onLoad" ausgewählt. Das bedeutet, dass das Script erst ausgeführt wird wenn alles geladen ist (Bilder etc.).
Wenn du den Code aber wie oben in deinen Code-Auszügen sofort ausführst, benötigt es das img.onload, da zu diesem Zeitpunkt das Bild eben noch nicht geladen ist.
Deshalb ist in meinem Beispiel "No wrap - in <body>" eingestellt.

Wenn du das aber änderst, geht es immer noch nicht, wegen der same-origin policy.
Das Bild müsste sich unter der Domain jsfiddle.net befinden. Deshalb ist in meinem Beispiel das jsfiddle-Logo verlinkt.
 
Und wie könnte ich das in einer normalen HTML-Datei, außerhalb von JSFiddle umsetzen? Müsste ich den JS-Code dann unterhalb des Formulars, bzw. des Bildes unterbringen? Wäre das denn überhaupt valide?
 
Hallo-Welt schrieb:
Und wie könnte ich das in einer normalen HTML-Datei, außerhalb von JSFiddle umsetzen? Müsste ich den JS-Code dann unterhalb des Formulars, bzw. des Bildes unterbringen? Wäre das denn überhaupt valide?
Zum Vergrößern anklicken....

Wieso soll etwas was ich mache, nicht valide sein?

Nicht böse gemeint, aber das Problem ist ganz einfach, dass du etwas versuchst, wofür deine Kenntnisse eindeutig nicht ausreichend sind.
Dir fehlt es nicht nur an JS-Kenntnissen, sondern allgemein an Erfahrung in der ganzen Web-Thematik. Ich kann und will dir nicht alles vorkauen, sorry.
Ich denke du solltest dieses ganze Vorhaben erstmal ruhen lassen.
Wahrscheinlich wäre so ein komplizierter Vorgang gar nicht nötig, du weißt nur nicht wie man es sonst lösen könnte.

Ich selbst weiß zumindest bis jetzt noch keinen Anwendungsfall in dem dieser Vorgang nötig wäre.
 
Also du hast mit bisher sehr geholfen. Dafür will ich mich erst mal bedanken.
Ich habe nie bezweifelt, dass der Code valide ist, sondern lediglich gefragt, ob man den einfach so in den body-Tag verschieben kann, da JS ja normalerweise einfach eingebunden, bzw. im Head liegt.
Und ja, leider bin ich in JavaScript momentan noch sehr unerfahren, und bin dir daher sehr dankbar, dass du mir den Code weitgehendst "vorgekaut" hast, und ich daraus lernen kann. Dass ich in HTML, CSS und PHP unerfahren sein sollte ist mir allerdings neu. Es ist zwar richtig, dass ich vor noch nicht mal einem Jahr angefangen habe, mich richtig in die Materie einzuarbeiten, so finde ich persönlich, dass ich aktuell aber schon recht ordentliche Seiten mit optisch ansprechenden Layouts aufbauen kann.
Was das mit dieser Methode angeht, da mag es sein, dass es eine einfachere und effektivere Methode gibt, mein Vorhaben umzusetzen, so könnte ich dann jedoch keine Bestätigung des Vorgangs an den Server senden und diesen mit PHP bearbeiten, wie auch wieder eine Antwort zurücksenden. Andernfalls müsste das ganze in JS umgesetzt werden, was sich in meinem Fall als eher kompliziert erweisen würde.
Ich danke dir auf jeden Fall für deine ausführliche Hilfe. Hast mir sehr geholfen :).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben