1

画像をランダムに生成するphpスクリプトがあります。このようなもの：

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

// process image

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

私のhtmlは次のようになります：

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

次に、ボタンのクリックを処理するjqueryファイルがあり、ボタンがクリックされたときに新しいランダム画像が読み込まれます。

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

私はfirebugを使用しています。リクエストが実際に送信され、レスポンスが正常に受信されたことがわかりますが、画像は変更されません。

何が間違っているので、どうすれば修正できますか？

4

6 に答える 6

7

以前の回答のどれも問題を解決しなかったと思うので、私は別の回答を追加しました。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()));
});
于 2012-04-04T07:45:37.450 に答える
4

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

これを試して：

 $(function(){
      $('#button').click(function(){
          $('#image').attr('src', 'models/plugins/image.php?rand=' + Math.floor(Math.random()*1000) );
      });
 });
于 2012-04-04T07:32:46.567 に答える
1

属性内の画像を使用するsrcには、有効な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());
?>

私はかつて、同様の質問に対するより詳細な回答をまとめ ました。

于 2012-04-04T07:35:02.927 に答える
0

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

したがって、次のことを行う必要があります。

  • 画像を編集する
  • 結果の画像をデータ文字列で取得します。
  • 画像文字列を取得するには、画像をファイルシステムに保存してfile_get_contents（）（キャッシュに便利）で読み取るか、場所を指定せずにimagejpeg（）を使用して、画像を出力バッファに配置します。出力バッファから値を取得するには、ob_start（）およびob_get_contents（）を使用します。
  • 画像のデータ文字列をbase64に変換します（base64_encode（）を使用）
  • この文字列をブラウザに返します
  • 画像の「src」フィールドを「data：image / png; base64、[BASE64]」に設定します。ここで、[BASE64]はPHPから返される文字列です。
于 2012-04-04T07:35:33.113 に答える
-1

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

このようなもの：

$(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'models/plugins/image.php?t='+((new Date).getTime()),
            success: function(data){
                $('#image').html('<img src="' + data + '">')
            }
        })
    })
})
于 2012-04-04T07:35:50.867 に答える
-1

の代わりに$('#image').html('<img src="' + data + '">')、$('#image').attr('src', data);

于 2012-04-04T07:37:10.483 に答える