AJAXを使ってPHPで生成された画像を表示する

Question

私はランダムに画像を生成するPHPスクリプトを持っています。このような何か：

<?php 
$image = imagecreatetruecolor(400,200); 

// process image 

// rendering image 
header("Content-type: image/jpeg"); 
imagejpeg($image); 
?> 

私のHTMLは次のようになります。ボタンがあるときに、新しいランダムイメージがロードされるように、その後、私は、ボタンにクリックを処理jqueryのファイルを持っている

<img id="image" src="/models/plugins/image.php"/> 
<button id="button">Get new image</button></body> 

クリック：

$(function(){ 
    $('#button').click(function(){ 
     $.ajax({ 
      url: 'models/plugins/image.php', 
      success: function(data){ 
       $('#image').html('<img src="' + data + '">') 
      } 
     }) 
    }) 
}) 

私は放火犯を使用して、私はその要求が実際に送信され、応答が正常に受信されていますが、画像が変化しないとされて見ることができます。

私は間違っていますが、これをどのように修正できますか？

Answer 1

を試してみてください。私は、OPが望んだのは、ボタンがクリックされたときに画像を更新（！）することだけだったと思います。したがって、Ajaxリクエストは必要ありません。画像をリロードするだけです。また、イメージのsrc属性にランダムなクエリ文字列を追加することで、それを強制することができます。

$('#button').click(function() { 
    var $image = $('#image'); 
    var plainSrc = $image.attr('src').split("?")[0]; // disregard previous query string 
    $image.attr('src', plainSrc + "?" + (new Date().getTime())); 
}); 

Answer 2

画像タグのsrc属性は、実際には実際のJPEGデータではないURLを実際に想定しています。

このお試しください：src内の画像を使用するには

$(function(){ 
     $('#button').click(function(){ 
      $('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000)); 
     }); 
}); 

Answer 3

では、有効なURI、例えばdata-URIを提供する必要があります属性：

<?php 
$image = imagecreatetruecolor(400,200); 

// process image 

// create image URI 
ob_start(); 
imagejpeg($image); 
echo "data:image/jpeg;base64,", base64_encode(ob_get_clean()); 
?> 

私はかつて同様の質問に対するa more detailed answerをコンパイル。

Answer 4

結果の画像は、そのように含まれるようにbase64でエンコードする必要があります。

は、だから、次の操作を行う必要があります。

• 編集画像データ列で画像を結果
• 取得を。
• イメージ文字列を取得するには、ファイルシステムに格納し、file_get_contents（）（キャッシュに便利）で読み込むか、locationなしでimagejpeg（）を使用して出力バッファにイメージを置きます。出力バッファから値を取得するには、ob_start（）およびob_get_contents（）を使用します。
• "データ：画像/ PNG、BASE64、[BASE64]" にブラウザ
• 設定された画像 "SRC" フィールドに（BASE64_ENCODEを使用して（））BASE64への画像の変換データ列
• 戻り、このストリングここ[ BASE64]はPHPから返される文字列です。

Answer 5

呼び出しているイメージがブラウザによってキャッシュされています。イメージURLの最後にクエリ文字列を使用して、ブラウザのものを新しいイメージにし、キャッシュされたバージョンを使用しないでください。このような

何か：

$(function(){ 
    $('#button').click(function(){ 
     $.ajax({ 
      url: 'models/plugins/image.php?t='+((new Date).getTime()), 
      success: function(data){ 
       $('#image').html('<img src="' + data + '">') 
      } 
     }) 
    }) 
}) 

Answer 6

代わりの$('#image').html('<img src="' + data + '">')、私は前の回答のどれもが問題を解決しないと思うので、私は別の答えを追加しました$('#image').attr('src', data);