cómo enviar imágenes png desde el servidor para mostrar en el navegador a través de ajax

Question

He estado teniendo dificultades con lo que debe ser una tarea increíblemente normal. Subo y guardo imágenes en mi servidor web y guardo la ruta al archivo en la base de datos MySQL (todo está funcionando). Lo que no funciona es ir a buscar un archivo de imagen desde el servidor y mostrarlo en la página a través de ajax.

Originalmente estaba tratando de recuperar la ruta desde la base de datos y actualizar el atributo src de una etiqueta con la ruta a la imagen. Esto estaba funcionando, pero de esta manera todas las imágenes están en una carpeta en el servidor donde todas las personas tienen acceso a ellas. Esto no está bien. Solo puedo hacer que los usuarios accedan a las imágenes que pertenecen a ciertos usuarios.

Para restringir el acceso a estas fotos agregué una directiva Apache en esa carpeta, que restringió el acceso con éxito. Entonces surgió el problema de que no podía mostrar las imágenes en el navegador configurando el atributo src en esa ruta. Ver mi publicación: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Finalmente, he aprendido que tengo que usar PHP para leer los datos de imagen directamente desde el servidor y enviar estos datos al navegador. He utilizado la función file_get_contents(), que funciona para convertir el archivo de imagen (PNG) en el servidor en una cadena. Devuelvo esta cadena al navegador en una llamada ajax. Lo que no puedo obtener es: cómo convertir esta cadena nuevamente en una imagen usando JavaScript?

ver este código:

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

Answer 1

podría mostrar una imagen predeterminada "sin acceso" a los usuarios que tienen prohibido acceder a la imagen:

<?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'); 
} 

Y, en el lado del cliente:

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

---

Alternativamente, Si realmente desea o necesita enviar los datos a través de Ajax, puede codificarlo Base64:

<?php 

echo base64_encode(file_get_contents($file)); 

y colocar la respuesta en una etiqueta img utilizando el Data URI scheme

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

Teniendo en cuenta que los datos codificada en Base64 es significativamente mayor que el original, puede enviar los datos sin procesar y codificar en el navegador usando un library.

---

¿Tiene sentido para usted?

Answer 2

Usted no puede hacerlo a través de AJAX.

se podría hacer algo como esto:

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

A continuación, utilice JavaScript para cambiar la cadena de consulta.

Answer 3

En lugar de obtener get_image.php través de AJAX, ¿por qué no usar:

<img src="get_image.php" /> 

Es prácticamente lo mismo. Solo puede usar AJAX para actualizar el <img> de forma dinámica.

Answer 4

realidad Puede incrustar datos de la imagen dentro de la etiqueta img en el navegador, por lo tanto, el código Ajax podría tener este aspecto:

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

Tenga en cuenta que tendrá que escribir esta función base64_encode. Eche un vistazo a this question - la función se da allí.