Invio/Visualizzazione di un'immagine codificata Base64

Question

Devo inviare una stringa codificata base64 a un client. Pertanto, sto aprendo e leggendo un file immagine sul server, lo codifico e inviamo i dati insieme al tipo di contenuto image/jpeg al browser. Esempio in 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, sto chiamando:

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

che non funziona per qualche motivo. onerror spara sempre. Guardando il FireBug Network task per esempio, mi dice che sto ricevendo le informazioni corrette dell'intestazione e un valore corretto dei byte trasferiti.

Se si inviano dati come Content-type: text/plain, la stringa base64 viene visualizzata nel browser (se si chiama direttamente lo script). Copiando e incollando quell'output nello src di un elemento <img> viene mostrata l'immagine come previsto.

Cosa sto facendo di sbagliato qui?

Soluzione

Grazie Pekka per me che indica sul mio errore. Non hai bisogno (non puoi!) Di codificare i dati di immagine binaria come stringa base64 in quel tipo di approccio. Senza codifica base64, funziona solo.

Answer 1

In questo caso, non vi è alcun motivo per codificare in base64 i dati dell'immagine in primo luogo. Quello che vuoi emettere è semplice vecchia immagine.

Basta passare attraverso l'immagine JPEG così com'è.

L'unico modo per cui ciò avrebbe senso per me è se si prendesse l'uscita di generate.php tramite una chiamata AJAX e si inserisca direttamente il risultato nella proprietà src. Dovrebbe funzionare (anche se non in IE < 8, ma sono sicuro che lo sai). Ma se puoi chiamare lo generate.php direttamente come sorgente dell'immagine, non ne vedo la necessità.

Answer 2

Se si imposta content-type su image/jpeg, si dovrebbero fornire solo i dati jpeg, senza la crap di base64. Ma stai trattando il risultato come se fosse html.

Si sta effettivamente costruendo un data uri, che è ok, ma come hai notato, solo come un uri. Quindi lascia il tipo di contenuto così com'è (text/html), e

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

e sei a posto.

Answer 3

credo che possa essere fatto abbastanza efficiente solo utilizzando solo php ... è possibile utilizzare la funzione di seguito per il rendering di immagini in base64 dati codificati

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.'"/>'; 
    } 
} 

come utilizzare questa funzione

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

esegui la funzione binaryImages .. Il primo parametro è il percorso dell'immagine, il secondo è la larghezza e poi l'altezza ...altezza e la larghezza sono opzionali

Answer 4

lo consiglierei: base64_encode codifica i dati con Base64 MIME

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