通过Ajax将图像从php发送到html

Question

我有一个PHP函数来生成图像：

function gen_img(){
$image = imagecreate(200,200);
.... //some php codes
header("Content-type:image/jpeg");
imagejpeg($image);
}
// there is no problem when generating image, image generated successfully when i call the function

我知道如何使用以下内容将其放在html上：

<img id='imageone' src="link to the function">
// the image shown, loaded in the <img> tag, no problem

但是，现在我希望使用jquery ajax加载图像，然后将其放入<img>标签。 有人可以告诉我方式吗？

Answer 1

我建议base64编码图像数据

$data = imagecreate(200,200);
$type = 'jpeg';
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo $base64;

在javascript部分中，您应该可以执行以下操作：

document.getElementById('captha').src='data:image/png;base64,iVBORw0KGgoAAAANSUh............................. etc...';

完整的示例：

<img src="blank.gif" id="captha">
<script type="text/javascript">
jQuery.ajax('captha.php?ident=xyhksj78').done(function(data){
      document.getElementById('captha').src=data;
      });
</script>

Answer 2

我想刷新图像，它是随机图像。 它最像验证码

仍然不需要使用AJAX。

只需为图像元素设置一个新的src属性值。 您可以将当前时间戳值添加为查询字符串参数，以便浏览器将再次从服务器请求它，而不是从其缓存中获取它：

$('#imageone').attr('src', 'scriptname.php?' + (new Date).getTime());

完成...