Ergebnis 1 bis 15 von 15
  1. #1
    pimbolie1979 ist offline Grünschnabel
    registriert
    15-02-2015
    Beiträge
    6

    Bilder mit ajax vom Server dynamisch laden

    Hallo Leute,

    auf meiner Webseite gibt es die Möglichkeit JPEG-Bilder auf den Server hochzuladen. Dies funktioniert auch schon ganz gut. Nachdem ich das Bild hochgeladen und verkleinert habe, möchte ich das Bild auf der Webseite anzeigen. Hierzu möchte ich nicht das die Seite mit PHP neu geladen wird (das bekomme ich hin), sondern ich möchte mit Hilfe von AJAX das Bild vom Server abholen und darstellen. Das Script möchte ich später dann an anderen Stellen für einen dynamischen Bilder load benutzen.

    Allerdings habe ich hier erhebliche Probleme und hoffe auf Hilfe von Euch. Ich habe schon einges ausprobiert jedoch scheint das Bild immer im falschen Format für die Darstellung zu sein.


    Dies war mein erster Versuch direkt auf ein Bild zuzugreifen das auf meinem Webserver liegt:

    HTML-Code:
    $.get("http://www.webseite.de/objekt_fotos/157/BMW-5er-GT-M-Sportpaket.jpg", function (rawImageData) 
    {
       //$(".prevImg").attr("src", "data:image/jpeg;base64," + rawImageData);
    
       var readImage = new FileReader();
    
       // Sofern die Datei komplett in den RAM eingelesen wurde wird eine Funktion ausgeführt.
       readImage.onload = function(event)
      {
          $(".prevImg").attr("src",event.target.result).fadeIn(2000);
       }
       readImage.readAsDataURL(rawImageData);
    								
       //console.log("image raw data");
       //console.log(rawImageData);
    });

    Ein anderer Versuch war mit AJAX und PHP (Dies möchte ich später benutzten):

    HTML-Code:
    $.ajax(
    {
    	url: "/php_scripte/get_image.php",
    	type: "GET",    
    	//dataType: "image/jpeg",
    	dataType: "image/jpg",
    	data: 'ReportID=67',
    	success: function(loaded_image_stream)
    	{
    		//$('#loadingAnimation').fadeOut('slow', function() { $('#reportNodeView').fadeIn('slow'); });
    		//$('#previewImage').attr('src', 'data:image/jpg;base64,' + bytes);
    		
    		$(".prevImg").attr("src", loaded_image_stream);
    		//$('#preview').html(msg);
    		
    	i = new Image();
    	i.src = loaded_image_stream;
    	$(this).append(i);
    	},
    
    	error: function(error, txtStatus)
    	{
    		console.log(loaded_image_stream);
    		console.log(txtStatus);
    		console.log('error');
    	}
    });

    Hier mein PHP Teil:

    $file = file_get_contents($_SERVER["DOCUMENT_ROOT"]."/fotos/157/testbild.jpg");
    echo base64_encode($file);


    Ich hatte es auch mit:

    $image_test = imagecreatefromjpeg($_SERVER["DOCUMENT_ROOT"]."/fotos/157/testbild.jpg");
    versucht jedoch alles ohne erfolg.


    Das was ich programmieren möchte ist folgendes:

    1. ich erzeuge eine AJAX Anfrage an meinen Server und übergebe die ID vom Bild
    2. das PHP Skript prüft ob das Bild vorhanden ist und öffnet es dann
    3. das Bild wird dann nachdem es eingelesen wurde an den User geschickt
    4. das Bild wird dann beim User dynamisch in der Webseite integriert

    Ich weiß das es sicherlich einige Script im Internet gibt die funktionieren. Jedoch sind die natürlich so mächtig das es sehr schwer ist Diese zu verstehen. Einfache Beispiele sind Mangelware und ich hoffe das Ihr mir hier weiterhelfen könnt

    - - - Aktualisiert - - -

    Ich glaube ich habe eine Lösung gefunden.

    Ich muss doch nicht das Bild mit einer Ajax Anfrage erhalten. Sondern ich kann doch einfach ein leeres Bild auf meiner Seite erstellen und füge den Pfad hinzu. Dann müste doch der Browser das Bild automatisch laden und darstellen.

    - - - Aktualisiert - - -

    Die Lösung hat auch einen Nachteil:

    Diese Lösung hat leider den Nachteil, das der Pfad vom Bild im HTML code steht. Somit sieht jeder den Pfad und kann das Bild herunterladen. Wenn ich das Bild dynamisch lade dann sieht man nur ein base64_encode kodiertes Stream. Hier könnte ich noch ein Wasserzeichen hinzufügen.

    Kann ich nicht die FileReader(); Funktion benutzen und einfach den Serverpfad angeben.


    Wenn nichts gegen meinen Ansatz spricht dann muss ich nur noch folgendes erledigen:
    Jetzt muss ich nur noch mit dem AJAX Post die ID von dem Benutzen an ein PHP Skript schicken und dieser erzeugt mit einen JSON return value. Dort stehen alle Bilder drin und ich erzeuge dann dynamisch so viele Bilder und ändere das SRC Attribute
    Geändert von mikdoe (29-03-2016 um 22:35 Uhr) Grund: Code Tags

  2. #2
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.297

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von pimbolie1979 Beitrag anzeigen
    Wenn ich das Bild dynamisch lade dann sieht man nur ein base64_encode kodiertes Stream.
    Wenn der Browser das Bild darstellen kann, kriege ich es auch gespeichert, egal ob Stream oder nicht.

  3. #3
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bilder mit ajax vom Server dynamisch laden

    die lösung hat aber einen anderen nachteil, du benötigst 2 requests anstelle von einem. deswegen ist es besser nicht erst die url zum bils zu senden, sonder das bild selbst.
    https://developer.mozilla.org/de/doc...b-Konstruktors
    https://developer.mozilla.org/en-US/...ng_Binary_Data

  4. #4
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    856

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von pimbolie1979
    Diese Lösung hat leider den Nachteil, das der Pfad vom Bild im HTML code steht. Somit sieht jeder den Pfad und kann das Bild herunterladen. Wenn ich das Bild dynamisch lade dann sieht man nur ein base64_encode kodiertes Stream. Hier könnte ich noch ein Wasserzeichen hinzufügen.
    Also wenn du den Pfad verschleiern möchtest kannst du das Bild zur not auch als css backgound image einbinden, wie z.B. bei einer Lightbox.
    Im Prinzip ist egal ob das Bild als base64 oder raw bianry vorliegt Rechtsklick bild speicher unter... .
    Wenn man das Element untersucht z.B via FireBug findet man de Pfad aber trotzdem.

    Das mit dem Wasserzichen versteh ich nicht, wie willst du das in das Bild bekommen? Einfach das base64 bearbeiten, wird nicht funktionieren, damit zerstörst du die Daten.

    Das einfachste wäre die Bilder in ein HTML5 Canvas zu laden, dann kannst Du via Pixelmanipulation ein Wasserzeichen erstellen. Die Pfade sind dann auch weg.
    HTML canvas drawImage() Method
    https://developer.mozilla.org/de/doc...on_with_canvas

  5. #5
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Wenn man das Element untersucht z.B via FireBug findet man de Pfad aber trotzdem.
    geht viel bequemer
    im ff "extras" => "seiteninformationen" => "medien" (ALT+x ALT+s ALT+m)

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Die Pfade sind dann auch weg.
    Nö... im Netzwerkverkehr sieht man die immer noch.

  7. #7
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    856

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von kkapsner
    Nö... im Netzwerkverkehr sieht man die immer noch.
    Ja hast mich ertappt, daran habe ich nicht gedacht. Dann muss man die Daten via websocket holen, das spart sogar noch ein klein wenig an Datenvolumen.

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Bilder mit ajax vom Server dynamisch laden

    Auch dann sind die Bilderdaten im Netzwerkverkehr sichtbar und speicherbar. Außerdem kann man ein <canvas> auch einfach per Rechtsklick speichern.
    Wenn du ein Bild im Browser anzeigen lassen willst, kann der Besucher deiner Seite dieses Bild auch auf seinem Rechner speichern (bzw. es ist schon auf dem Rechner gespeichert, da er es sonst nicht anzeigen kann). So einfach ist das.

  9. #9
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    856

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von kkapsner
    Außerdem kann man ein <canvas> auch einfach per Rechtsklick speichern.
    ok, das ist neu in der Anfangszeit vom canvas ging das nicht
    Dann Rechtsklick Deaktivieren

    Zitat Zitat von kkapsner
    So einfach ist das.
    Nicht ganz, wenn das nur die Pixelinformation als arraybuffer übertagen werden dann weiß der Browser nicht das ein Bild ist ergo wird nix gespeichert. Der otto normal Mensch kann mit den arraybuffer Daten erst mal nix anfangen. Mehr Abrieglung geht nicht.

  10. #10
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.297

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Dann Rechtsklick Deaktivieren
    JavaScript abschalten, dann geht der Rechtsklick wieder.

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von xorg1990 Beitrag anzeigen
    die Pixelinformation als arraybuffer übertagen
    Du willst Bilder wirklich als BMP übertragen? Oder Willst du auf der Clientseite einen JPG oder PNG Parser laufen lassen?

    Zitat Zitat von xorg1990 Beitrag anzeigen
    dann weiß der Browser nicht das ein Bild ist ergo wird nix gespeichert
    Sobald du die Daten in ein <canvas> schreibst, sind die Daten als Bildinformation vorhanden. Außerdem speichert der Browser das immer - völlig unabhängig, ob das ein Bild ist oder nicht. Du willst im JS ja auf die Daten zugreifen, also müssen sie auch gespeichert sein.

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Der otto normal Mensch kann mit den arraybuffer Daten erst mal nix anfangen.
    Für den Normalbenutzer reicht es, wenn du das mit dem Hintergrundbild machst... aber dann wird es das Bild einfach per Screenshot speichern.

  12. #12
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von Dormilich Beitrag anzeigen
    JavaScript abschalten, dann geht der Rechtsklick wieder.
    ganz so einfach ist es nicht, da das bild ja per js überhaupt erst gezeichnet wird.
    schaltet er js ab, kein bild.
    schaltet er es nicht ab, kein rechtsklick.
    jetzt noch an das bild zu kommen ist möglich, erfordert aber schon wesentlich mehr kentnisse als den speicher-knopf zu finden.
    (im FF z.b. about:config => "dom.event.contextmenu.enabled" => false)

    Zitat Zitat von kkapsner Beitrag anzeigen
    Oder Willst du auf der Clientseite einen JPG oder PNG Parser laufen lassen?
    der läuft immer Clientseitig

    Zitat Zitat von kkapsner Beitrag anzeigen
    Für den Normalbenutzer reicht es, wenn du das mit dem Hintergrundbild machst... aber dann wird es das Bild einfach per Screenshot speichern.
    ich denke die seiteninformationen kennt auch der großteil der normaluser
    Geändert von tsseh (06-04-2016 um 09:13 Uhr)

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von tsseh Beitrag anzeigen
    der läuft immer Clientseitig
    Ich meinte mit JS...
    Zitat Zitat von tsseh Beitrag anzeigen
    ich denke die seiteninformationen kennt auch der großteil der normaluser
    Glaube ich nicht... aber ich finde das Ansinnen sowieso sinnfrei. Wer nicht will, dass seine Bilder nicht von jemand anderem gespeichert werden, darf sie einfach nicht ins Netz stellen.

  14. #14
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich meinte mit JS...
    mit js die binärdaten eines jpgs in ein canvas zu zeichnen würde ich jetzt auch nicht verwerflich finden, aber das muss man ja nicht mal machen, sondern kann das dem browser überlassen.

    Zitat Zitat von kkapsner Beitrag anzeigen
    aber ich finde das Ansinnen sowieso sinnfrei. Wer nicht will, dass seine Bilder nicht von jemand anderem gespeichert werden, darf sie einfach nicht ins Netz stellen.
    davon abgesehen sehe ich auch keinen grund, das speichern zu verbieten, verwenden darf man sie sowieso nicht und wenn max musterman sie privat auf seiner festplatte hat... ...wen störts?

  15. #15
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    856

    AW: Bilder mit ajax vom Server dynamisch laden

    Zitat Zitat von kkapsner
    Sobald du die Daten in ein <canvas> schreibst, sind die Daten als Bildinformation vorhanden. Außerdem speichert der Browser das immer - völlig unabhängig, ob das ein Bild ist oder nicht. Du willst im JS ja auf die Daten zugreifen, also müssen sie auch gespeichert sein.
    Ja aber die Daten sind ja im RAM gespeichert und nicht im den Tamporay internet files/cache. Was im Ram liegt ist ja nicht wirklich gespeichert.

    Zitat Zitat von kkapsner
    Du willst Bilder wirklich als BMP übertragen? Oder Willst du auf der Clientseite einen JPG oder PNG Parser laufen lassen?
    BMP is low, dachte mehr so an TIFF, cr2, dng usw. Parser dafür gibt es. Allerdings hat man dann noch kein Bild, erst nach einer handvoll Algorithmen erhält man ein vernünftiges Bild.


    Zitat Zitat von kkapsner
    Glaube ich nicht... aber ich finde das Ansinnen sowieso sinnfrei. Wer nicht will, dass seine Bilder nicht von jemand anderem gespeichert werden, darf sie einfach nicht ins Netz stellen.
    Darum geht es mir nicht, wichtig ist nur google darf die Bilder nicht finden, zusätzlich noch soweit wie möglich das speichern des Bildes unterbinden.
    -Nicht nur Google sonder auch gewisse Bildsauger.

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 17-05-2013, 17:56
  2. Javascriptdatei dynamisch mit AJAX laden
    Von jeko im Forum Tutorials Javascript
    Antworten: 1
    Letzter Beitrag: 18-07-2007, 23:45
  3. formmail.pl auf server laden
    Von schlegel.berlin im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 16-03-2007, 14:35
  4. [PHP] Kann man php-Dateien vom Server laden?
    Von reiflo im Forum Serverseitige Programmierung
    Antworten: 4
    Letzter Beitrag: 12-11-2004, 18:35
  5. Bilder dynamisch laden??
    Von quaky im Forum Flash
    Antworten: 2
    Letzter Beitrag: 12-01-2001, 09:34

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •