ajax経由でサーバーからpng画像をブラウザに表示する方法

Question

私は信じられないほど正常な作業でなければならないことに苦労しています。私はアップロードし、私のWebサーバーに画像を保存し、MySQLデータベース（これはすべて動作している）のファイルへのパスを保存します。動作しないことは、サーバーから画像ファイルを取得し、ajax経由でページに表示することです。

元々私はデータベースからパスを取得し、タグのsrc属性を画像のパスで更新しようとしていました。これは機能していましたが、この方法では、すべての画像が、サーバー上のフォルダにあり、そこにはすべてのユーザーがアクセスできます。これは良くない。私はこれらのユーザーがアクセスできる特定のユーザーに属する画像しか持てません。

これらの写真へのアクセスを制限するために、そのフォルダにApacheディレクティブを追加しました。このディレクティブはアクセスを制限しました。問題は、そのパスにsrc属性を設定することで、ブラウザに画像を表示できなくなったことになりました。私の記事を参照してください：https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

最後に私は、サーバーから画像データを直接読み込み、このデータをブラウザに送るためにPHPを使用する必要があることを知りました。私はfile_get_contents()関数を使用しています。この関数は、サーバー上のイメージファイル（PNG）を文字列に変換します。この文字列をajax呼び出しでブラウザに返します。私が得ることができない事は：JavaScriptを使用してこの文字列を画像に変換する方法は？

は、このコードを参照してください：

$.ajax({ 
    url: get_image.php, 
    success: function(image_string){ 
     //how to load this image string from file_get_contents to the browser?? 
    } 
}); 

Answer 1

あなたはデフォルトを表示することができ、画像にアクセスすることは禁止されているユーザーへの "アクセスなし" イメージ：

<?php 

$file = $_GET['file']; // don't forget to sanitize this! 

header('Content-type: image/png'); 
if (user_is_allowed_to_access($file)) { 
    readfile($file); 
} 
else { 
    readfile('some/default/file.png'); 
} 

とを、クライアント側：また

<img src="script.php?file=path/to/file.png" /> 

---

、実際にAjax経由でデータを送信したい場合、Base64でエンコードすることができます：

<?php 

echo base64_encode(file_get_contents($file)); 

そして、Base64でエンコードされたデータは、元よりも有意に大きいことを考えるとData URI scheme

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>'; 

を使用してimgタグでの応答を置く、あなたは生のデータを送信し、libraryを使用してブラウザでそれをコード化することができます。

---

あなたには意味がありますか？

Answer 2

あなたは、AJAX経由でそれを行うことはできません。

あなたはこのような何かを行うことができます：

<img src="script.php?image=image_name" /> 

はその後、クエリ文字列を変更するにはJavaScriptを使用しています。

Answer 3

代わりにだけ使用しない理由AJAXを通じてget_image.php取得する：

<img src="get_image.php" /> 

それは実質的に同じことです。 AJAXを使用して<img>を動的に更新することができます。

Answer 4

あなたが実際にそのためのAjaxのコードは次のようになります、ブラウザでimgタグ内に画像データを埋め込むことができます。あなたはこのbase64_encode機能を記述する必要があります

$.ajax({ 
    url: get_image.php, 
    success: function(image_string){ 
     $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />); 
    } 
}); 

注意。 this questionを見る - 機能はそこに与えられる。