显示PNG图像作为对jQuery AJAX请求的响应
是否可以在HTML的主流中显示由jQuery AJAX调用返回的图像？
我有一个脚本，用标题（图像/ PNG）绘制图像。 当我在浏览器中调用它时，会显示图像。
但是当我在这个脚本上使用jQuery进行AJAX调用时，我无法显示干净的图像，我有很多奇怪的符号。 这是我的脚本，使图像具有标题（图像/ 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调用：
$(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('
'); }, } );
在我的HTML文件中，我有一个div，其中class="div_imagetranscrits"将填充我的图像。
我不明白我做错了什么。 另一个解决方案是让我的脚本在磁盘上写入图像，然后获取要包含在src中的路径以显示它。 但我认为可以直接从AJAX请求获取带有图像/ PNG标头的图像。
您需要将图像发送回base64编码，请看： http ： //php.net/manual/en/function.base64-encode.php
然后在你的ajax调用中将success函数更改为：
$('.div_imagetranscrits').html('
');
方法1
你不应该进行ajax调用，只需将img元素的src作为图像的url。
如果您使用GET而不是POST，这将非常有用
方法2
如果你想对这个图像进行POST并按照你的方式进行操作（尝试在客户端解析图像的内容，你可以尝试这样的事情： http ： //en.wikipedia.org/wiki/Data_URI_scheme
您需要将data编码为base64，然后您可以将data:[放入img src
例如：
要编码到base64：
- 在普通的javascript中，请参阅如何在JavaScript中将字符串编码为Base64？
- 在perl http://perldoc.perl.org/MIME/Base64.html
- 在php http://php.net/manual/en/function.base64-encode.php中
这允许您只获取图像数据并设置为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 = $( '![]()
', { "alt": "test image", "src": imgSrc } ).appendTo( $( '#bb_theImageContainer' ) ); window.URL.revokeObjectURL( imgSrc ); }; oReq.send( null );
基本思想是数据被返回到未被篡改，它被放置在blob中，然后在内存中为该对象创建一个url。 看到这里和这里 。 注意支持的浏览器