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

我用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 属性实际上需要一个 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”字段设置为“data:image/png;base64,[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').attr('src', data);，而不是$('#image').html('<img src="' + data + '">')