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 + '">')
            }
        })
    })
})

我使用firebug，我可以看到实际发送了请求，并且成功收到了响应，但图像没有变化。

我做错了什么，如何解决这个问题？

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数据。

试试这个：

 $(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”字段设置为“data：image / 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);

使用AJAX显示php生成的图像

6 个答案: