wie png Bild vom Server zur Anzeige im Browser über Ajax senden

Question

Ich habe eine harte Zeit mit was muss eine unglaublich normale Aufgabe sein. Ich lade Bilder hoch und speichere sie auf meinem Webserver und speichere den Pfad zur Datei in der MySQL-Datenbank (das funktioniert alles). Die Sache, die nicht funktioniert, ist, eine Bilddatei vom Server zu holen und sie auf der Seite über Ajax anzuzeigen.

Ursprünglich wollte ich nur den Pfad aus der Datenbank abrufen und das Attribut src eines Tags mit dem Pfad zum Bild aktualisieren. Das funktionierte, aber auf diese Weise befinden sich alle Bilder in einem Ordner auf dem Server, auf den alle Zugriff haben. Das ist nicht gut. Ich kann nur die Bilder, die bestimmten Benutzern gehören, durch diese Benutzer zugänglich machen.

Um den Zugriff auf diese Fotos zu beschränken, habe ich eine Apache-Direktive für diesen Ordner hinzugefügt, die den Zugriff erfolgreich eingeschränkt hat. Das Problem war dann, dass ich die Bilder im Browser nicht anzeigen konnte, indem ich das src Attribut auf diesen Pfad setzte. Siehe meinen Beitrag: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Endlich habe ich gelernt, dass ich PHP verwenden muss, um die Bilddaten direkt vom Server zu lesen und diese Daten an den Browser zu senden. Ich habe die file_get_contents() Funktion verwendet, die die Bilddatei (PNG) auf dem Server in eine Zeichenfolge konvertiert. Ich gebe diese Zeichenfolge in einem Ajax-Aufruf an den Browser zurück. Das Ding, das ich nicht bekommen kann, ist: wie man diese Zeichenkette zurück in ein Bild mit JavaScript umwandelt?

Sehen Sie diesen Code:

$.ajax({ 
    url: get_image.php, 
    success: function(image_string){ 
     //how to load this image string from file_get_contents to the browser?? 
    } 
}); 

Answer 1

Sie könnten einen Standard "kein Zugriff" Bild für Benutzer anzuzeigen, die das Bild für den Zugriff verboten:

<?php 

$file = $_GET['file']; // don't forget to sanitize this! 

header('Content-type: image/png'); 
if (user_is_allowed_to_access($file)) { 
    readfile($file); 
} 
else { 
    readfile('some/default/file.png'); 
} 

Und auf der Client-Seite:

<img src="script.php?file=path/to/file.png" /> 

---

Alternativ Wenn Sie wirklich wollen oder müssen die Daten über Ajax senden, können Sie Base64 es kodieren:

<?php 

echo base64_encode(file_get_contents($file)); 

und legen Sie die Antwort in einem img Tag das, dass die Base64-codierten Daten Gegeben Data URI scheme

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>'; 

mit deutlich größer als das Original ist, könnten Sie die Rohdaten und kodieren sie im Browser mit einem library senden.

---

Macht das für Sie Sinn?

Answer 2

Sie können es nicht über Ajax tun.

Man könnte so etwas tun:

<img src="script.php?image=image_name" /> 

Dann JavaScript verwenden, um die Abfrage-String zu ändern.

Answer 3

Statt get_image.php durch AJAX zu bekommen, warum nicht einfach verwenden:

<img src="get_image.php" /> 

Es ist praktisch das Gleiche. Sie können einfach AJAX verwenden, um die dynamisch zu aktualisieren.

Answer 4

Sie können tatsächlich Bilddaten innerhalb des img Tag im Browser einbetten, damit AJAX-Code könnte wie folgt aussehen:

$.ajax({ 
    url: get_image.php, 
    success: function(image_string){ 
     $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />); 
    } 
}); 

Beachten Sie, dass Sie benötigen, um diese base64_encode Funktion zu schreiben. Sehen Sie sich this question an - die Funktion ist dort angegeben.