使用AJAX顯示php生成的圖像

Question

我有一個隨機生成圖像的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 + '">') 
      } 
     }) 
    }) 
}) 

我用的螢火，我可以看到，請求實際發送和響應被成功接收，但圖像不會改變。

我在做什麼錯，我該如何解決這個問題？

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屬性實際上期望URL不是實際的JPEG數據。

試試這個：

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

Answer 3

要使用圖像內的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()); 
?> 

我編譯一次a more detailed answer了類似的問題。

Answer 4

生成的圖像必須以base64編碼才能包含在內。

所以，你需要做到以下幾點：

• 編輯圖像
• 獲取導致數據串的圖像。
• 要獲取圖像字符串，可以將其存儲到文件系統，並通過file_get_contents（）（對緩存很有用）讀取它，或者使用不帶位置的imagejpeg（），將圖像放入輸出緩衝區。要從輸出緩衝區獲取值，請使用ob_start（）和ob_get_contents（）。圖像以BASE64的
• 轉換數據串（使用BASE64_ENCODE（））
• 返回此字符串到瀏覽器
• 集圖像 「SRC」 字段設置爲 「數據：圖像/ PNG; BASE64，[BASE64]」，其中[ BASE64]是從PHP返回的字符串。

Answer 5

您呼叫正在被瀏覽器緩存的圖像，使用查詢字符串的圖片網址的結尾讓瀏覽器的事情了一個新的形象，它不應該使用緩存的版本。

事情是這樣的：

$(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);