显示PNG图像作为对jQuery AJAX请求的响应
是否可以在jQuery的主流中显示由HTML调用返回的图像？
我有一个脚本，可以绘制一个带有标题( image /PNG)的图像。当我简单地在浏览器中调用它时，图像就会显示出来。
但是当我在这个脚本上使用jQuery进行AJAX调用时，我不能显示干净的图像，我有一些带有许多奇怪符号的东西。这是我的脚本，用来制作带有标题( image /PNG)的图像。
#!/usr/bin/perl
use strict;
use CGI;
use Template;
use CGI::Carp qw(fatalsToBrowser);
use lib qw(lib);
use GD;
my $cgi = new CGI;
my $id_projet = $cgi -> param('id_projet') ; #
# Create a new image
my $image = new GD::Image(985,60) || die;
my $red = $image->colorAllocate(255, 0, 0);
my $black = $image->colorAllocate(0, 0, 0);
$image->rectangle(0,0,984,59,$black);
$image->string(gdSmallFont,2,10,"Hello $id_projet ",$black);
# Output the image to the browser
print $cgi -> header({-type => 'image/png',-expires => '1d'});
#binmode STDOUT;
print $image->png;然后我有了我的主脚本，里面有一个AJAX调用：
<script type="text/javascript" >
$(document).ready( function() {
$.ajax({
type: "POST",
url:'get_image_probes_via_ajax.pl',
contentType: "image/png",
data: "id_projet=[% visual.projet.id %]",
success: function(data){
$('.div_imagetranscrits').html('<img src="' + data + '" />'); },
} );
</script> 在我的HTML文件中，有一个带有class="div_imagetranscrits"的div，用来填充我的图像。
我看不出我做错了什么。另一种解决方案是让我的脚本将图像写到磁盘上，并只获取要包含在src中的路径来显示它。但我认为可以直接从AJAX请求中获取带有image/PNG头的图像。
回答 4
Stack Overflow用户
发布于 2012-05-29 23:48:49
您需要将图像发送回经过base64编码的图像，看看这个：http://php.net/manual/en/function.base64-encode.php
然后，在ajax调用中，将成功函数更改为：
$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');Stack Overflow用户
发布于 2012-05-29 23:41:31
方法1
您不应该进行ajax调用，只需将img元素的src作为图像的url。
如果使用GET而不是POST，这将非常有用
<script type="text/javascript" >
$(document).ready( function() {
$('.div_imagetranscrits').html('<img src="get_image_probes_via_ajax.pl?id_project=xxx" />')
} );
</script>方法2
如果您想要发布到该图像并按照您所做的方式进行操作(尝试在客户端解析图像的内容，您可以尝试如下所示：http://en.wikipedia.org/wiki/Data_URI_scheme
您需要将data编码为base64，然后可以将data:[<MIME-type>][;charset=<encoding>][;base64],<data>放入img src中
举个例子：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot img" />要编码为base64，请执行以下操作：
在纯javascript中，请参阅How can you encode a string to Base64 in JavaScript?
- 。
Stack Overflow用户
发布于 2013-10-30 19:40:38
这允许您只获取图像数据并设置为img src，这很酷。
var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
var blob = oReq.response;
var imgSrc = URL.createObjectURL( blob );
var $img = $( '<img/>', {
"alt": "test image",
"src": imgSrc
} ).appendTo( $( '#bb_theImageContainer' ) );
window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );其基本思想是将数据原封不动地返回，将其放入blob中，然后在内存中创建指向该对象的url。参见here和here。注意支持的浏览器。
https://stackoverflow.com/questions/10802312
复制相似问题
腾讯云开发者
