Enviar/Mostrar una imagen codificada en base64

Question

Necesito enviar una cadena codificada base64 a un cliente. Por lo tanto, estoy abriendo y leyendo un archivo de imagen en el servidor, lo codifico y envío esos datos junto con el tipo de contenido image/jpeg al navegador. ejemplo en php:

$image  = $imagedir . 'example.jpg'; 
$image_file = fopen($image, 'r'); 
$image_data = fread($image_file, filesize($image)); 

header("Content-type: image/jpeg"); 
echo 'data:image/jpeg;base64,' . base64_encode($image_data); 

ClientSide, estoy llamando:

var img  = new Image(); 
img.src  = "http://www.myserver.com/generate.php"; 
img.onerror = function(){alert('error');} 
$(img).appendTo(document.body); 

que no funciona por alguna razón. onerror siempre dispara. Al ver el FireBug Network task, por ejemplo, me dice que estoy recibiendo la información de encabezado correcta y un valor correcto de los bytes transferidos.

Si envío esos datos como Content-type: text/plain funciona, la cadena base64 se muestra en el navegador (si invoco el script directamente). Copiando y pegando esa salida en el src de un elemento <img> muestra la imagen como se esperaba.

¿Qué estoy haciendo mal aquí?

Solución

Gracias Pekka por dirigirme en mi error. No necesita (¡no puede!) Codificar esos datos de imagen binarios como cadena base64 en ese tipo de enfoque. Sin la codificación base64, simplemente funciona.

Answer 1

En este caso, no hay ninguna razón para base64 codificar los datos de imagen en primer lugar. Lo que quiere emitir son simples datos de imágenes antiguas.

Simplemente pase a través de la imagen JPEG tal como está.

La única forma en que esto tendría sentido para mí es si agarró la salida de generate.php a través de una llamada AJAX, y puso el resultado directamente en la propiedad src. Eso debería funcionar (aunque no en IE < 8, pero estoy seguro de que lo sabe). Pero si puede llamar al generate.php directamente como la fuente de la imagen, no veo la necesidad de esto.

Answer 2

Si configura el tipo de contenido en image/jpeg, debe dar solo los datos jpeg, sin la basura de base64. Pero está tratando el resultado como si fuera html.

Estás construyendo un uri de datos, lo cual está bien, pero como anotaste, solo como un uri. Así que deja el tipo de contenido, ya que es (text/html), y

echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">'; 

y ya está bueno para ir.

Answer 3

creo que se puede hacer de forma eficiente simplemente usando sólo php ... se puede utilizar la función de abajo para representar imágenes en base 64 de datos codificados

function binaryImages($imgSrc,$width = null,$height = null){ 
    $img_src = $imgSrc; 
    $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); 
    $img_str = base64_encode($imgbinary); 

    if(isset($height) && isset($width)) 
    { 
    echo '<img src="data:image/jpg;base64,'.$img_str.'" height="'.$height.'" width="'.$width.'"/>'; 
    } 
    else 
    { 
    echo '<img src="data:image/jpg;base64,'.$img_str.'"/>'; 
    } 
} 

cómo utilizar esta función

binaryImages("../images/end.jpg",100,100); 

ejecuta la función binaryImages .. primer parámetro es la ruta de la imagen, segundo es el ancho y luego la altura ...altura y anchura son opcionales

Answer 4

lo recomendaría: base64_encode codifica los datos con base 64 MIME

echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';