web-dev-qa-db-ja.com

base64でエンコードされた画像の送信/表示

base64でエンコードされた文字列をクライアントに送信する必要があります。したがって、私はサーバー上の画像ファイルを開いて読み取り、それをエンコードして、そのデータをimage/jpeg content-typeと共にブラウザーに送信します。 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);

クライアントサイド、私は呼んでいます：

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

それは何らかの理由で機能しません。 onerrorは常に起動します。たとえばFireBug Network taskを見ると、正しいヘッダー情報と転送されたバイトの正しい値を受け取っていることがわかります。

そのデータをContent-type: text/plainとして送信すると機能し、base64文字列がブラウザーに表示されます（スクリプトを直接呼び出す場合）。その出力を<img>要素のsrcにコピーして貼り付けると、画像が期待どおりに表示されます。

ここで何が悪いのですか？

ソリューション

私の間違いを指摘してくれてPekkaに感謝します。そのようなアプローチでは、そのバイナリイメージデータをbase64文字列としてエンコードする必要はありません（できません！）。 base64エンコーディングがなくても機能します。

phpjavascriptjquerybase64
19
jAndy

この場合、最初に画像データをbase64エンコードする理由はありません。放出したいのは、プレーンな古い画像データです。

JPEG画像をそのまま通過させるだけです。

AJAX呼び出しを介してgenerate.phpの出力を取得し、その結果をsrcプロパティに直接入力する場合、これが私にとって意味のある唯一の方法です。これは機能するはずです（ただしIE <8ではありませんが、ご存知だと思います）。ただし、画像のソースとしてgenerate.phpを直接呼び出すことができる場合は、これの必要性を見てください。

4
Pekka 웃

Content-typeをimage/jpegに設定する場合は、base64のクラップなしで、jpegデータのみを指定する必要があります。しかし、結果はHTMLであるかのように処理しています。

データURIを効果的に構築していますが、これは問題ありませんが、お気付きのとおり、URIとしてのみです。したがって、コンテンツタイプはそのまま（text/html）のままにし、

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

そして、あなたは行ってもいいです。

14
mvds

私はそれをphpのみを使用して非常に効率的に行うことができると信じています...あなたは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.'"/>';
    }
}

この機能の使い方

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

関数binaryImagesを実行します.. 1番目のパラメータは画像パス、2番目は幅、そして高さ...高さと幅はオプションです

5
Aman Virk

私はそれをお勧めします： base64_encode MIME base64でデータをエンコードします

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