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属性实际上需要一个 URL，而不是实际的 JPEG 数据。

尝试这个：

 $(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 回答