web-dev-qa-db-fra.com

Envoi/affichage d'une image codée en base64

Je dois envoyer une chaîne encodée base64 à un client. Par conséquent, j'ouvre et lis un fichier image sur le serveur, le code et l'envoie avec le type de contenu image/jpeg au navigateur. Exemple 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 , j'appelle:

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

Cela ne fonctionne pas pour une raison quelconque. onerror tire toujours. Regarder FireBug Network task par exemple, me dit que je reçois les informations d'en-tête correctes et une valeur correcte d'octets transférés.

Si j'envoie ces données en tant que Content-type: text/plain cela fonctionne, la chaîne base64 est affichée dans le navigateur (si j'appelle le script directement). Copier et coller cette sortie dans la src d'un élément <img> affiche l'image comme prévu.

Qu'est-ce que je fais mal ici?

Solution

Merci Pekka de m'avoir signalé mon erreur. Vous n'avez pas besoin (vous ne pouvez pas!) Encoder ces données d'image binaire en tant que chaîne base64 dans ce type d'approche. Sans encodage base64, cela fonctionne.

phpjavascriptjquerybase64
18
jAndy

Dans ce cas, il n'y a aucune raison de coder en base64 les données d'image en premier lieu. Ce que vous voulez émettre, ce sont de vieilles données d'image.

Il suffit de passer par l’image JPEG telle quelle.

La seule façon dont cela aurait du sens pour moi est si vous saisissez la sortie de generate.php via un appel AJAX et que vous placez le résultat dans la propriété src directement. Cela devrait fonctionner (bien que pas dans IE <8, mais je suis sûr que vous le savez). Mais si vous pouvez appeler directement generate.php en tant que source de l'image, je n'en vois pas l'utilité.

4
Pekka 웃

Si vous définissez le type de contenu sur image/jpeg, vous ne devez donner que les données jpeg, sans la base64. Mais vous traitez le résultat comme s'il s'agissait de HTML.

Vous construisez effectivement un uri de données, ce qui est correct, mais comme vous l'avez mentionné, uniquement en tant qu'uri. Donc, laissez le type de contenu tel quel (text/html), et

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

et vous êtes prêt à partir.

14
mvds

Je crois que cela peut être fait assez efficacement en utilisant uniquement php ... vous pouvez utiliser la fonction ci-dessous pour restituer des images en données codées en base64

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

comment utiliser cette fonction 

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

lance la fonction binaryImages .. Le premier paramètre est le chemin de l'image, le second est la largeur, puis la hauteur ... hauteur et largeur sont facultatives

5
Aman Virk

je le recommande: base64_encode Encode les données avec MIME base64

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