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

J'ai besoin d'envoyer un base64 chaîne codée à un client. Je suis donc à l'ouverture et à la lecture d'un fichier image sur le serveur, encoder et envoyer des données avec la image/jpeg de type de contenu pour le 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);

Infoclientje vais appeler:

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

Qui ne fonctionne pas pour une raison quelconque. onerror se déclenche toujours. Regarder le FireBug Network task par exemple, me dit que je vais recevoir la bonne information d'en-tête et d'une juste valeur d'octets transférés.

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

Ce que je fais mal?

Solution

Grâce Pekka pour me pointer sur mon erreur. Vous n'avez pas besoin (vous ne pouvez pas!) encoder que les binaires de données d'image en base64 corde dans ce type d'approche. Sans l'encodage base64, il fonctionne, tout simplement.

source d'informationauteur jAndy

  1. 3

    Dans ce cas, il n'y a pas de raison de base64 encode les données d'image dans la première place. Ce que vous voulez émettre est âgé de plaine de données d'image.

    Juste passer à travers l'image JPEG.

    Le seul moyen ce serait logique pour moi est que si vous attrapé la sortie de generate.php via un appel AJAX, et mettre le résultat dans le src directement la propriété. Cela devrait fonctionner (mais pas dans IE < 8, mais je suis sûr que vous savez qui). Mais si on peut appeler generate.php directement l'image de la source, je ne vois pas la nécessité.

  2. 13

    Si vous définissez le type de contenu de l'image/jpeg, vous devez donner seulement les données jpeg, sans le base64 de la merde. Mais vous traiter le résultat comme si c'était du html.

    Vous êtes effectivement la création d'un data uri, qui est ok, mais comme vous l'avez remarqué, seulement comme une uri. Laissez donc le type de contenu comme il est (text/html), et

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

    et vous êtes bon pour aller.

  3. 5

    Je crois qu'il peut être fait de manière efficace, juste à l'aide de php ... vous pouvez utiliser la sous fonction pour le rendu des images dans les données encodé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);

    l'exécution de la fonction binaryImages .. le 1er paramètre est le chemin de l'image , le 2ème est la largeur et la hauteur ... de la hauteur et la largeur sont facultatifs

  4. 0

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

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