显示 PNG 图像作为对 jQuery AJAX 请求的响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10802312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display PNG image as response to jQuery AJAX request
提问by ZheFrench
Is it possible to display an image returned by jQuery AJAX call, in the main stream of your HTML?
是否可以在 HTML 的主流中显示由 jQuery AJAX 调用返回的图像？
I have a script that draws an image with a header (image/PNG). When I simply call it in the browser, the image is displayed.
我有一个脚本可以绘制带有标题（图像/PNG）的图像。当我简单地在浏览器中调用它时，就会显示图像。
But when I make an AJAX call with jQuery on this script, I can't display a clean image, I have something with a lot of strange symbols. This is my script that makes the image with a header (image/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;
Then I have my main script with an AJAX call inside:
然后我的主脚本里面有一个 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>
In my HTML file I have one div with class="div_imagetranscrits"to be filled with my image.
在我的 HTML 文件中，我有一个 divclass="div_imagetranscrits"用于填充我的图像。
I don't see what I'm doing wrong. The other solution is to make my script write the image on disk and just get the path to include in the src to display it. But I was thinking it was possible to get the image with an image/PNG header directly from an AJAX request.
我不明白我做错了什么。另一种解决方案是让我的脚本将图像写入磁盘，然后获取包含在 src 中的路径以显示它。但我认为可以直接从 AJAX 请求中获取带有图像/PNG 标头的图像。
回答by Timm
You'll need to send the image back base64 encoded, look at this: http://php.net/manual/en/function.base64-encode.php
您需要将图像发送回 base64 编码，看看这个：http: //php.net/manual/en/function.base64-encode.php
Then in your ajax call change the success function to this:
然后在您的 ajax 调用中将成功函数更改为：
$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');
回答by jperelli
Method 1
方法一
You should not make an ajax call, just put the src of the img element as the url of the image.
您不应该进行ajax调用，只需将img元素的src作为图像的url即可。
This would be useful if you use GET instead of POST
如果您使用 GET 而不是 POST，这将很有用
<script type="text/javascript" >
$(document).ready( function() {
$('.div_imagetranscrits').html('<img src="get_image_probes_via_ajax.pl?id_project=xxx" />')
} );
</script>
Method 2
方法二
If you want to POST to that image and do it the way you do (trying to parse the contents of the image on the client side, you could try something like this: http://en.wikipedia.org/wiki/Data_URI_scheme
如果您想发布该图像并按照您的方式进行操作（尝试在客户端解析图像的内容，您可以尝试这样的操作：http: //en.wikipedia.org/wiki/Data_URI_scheme
You'll need to encode the datato base64, then you could put data:[<MIME-type>][;charset=<encoding>][;base64],<data>into the img src
您需要将其编码data为base64，然后您可以放入data:[<MIME-type>][;charset=<encoding>][;base64],<data>img src
as example:
例如：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot img" />
To encode to base64:
要编码为 base64：
- in plain javascript, see How can you encode a string to Base64 in JavaScript?
- in perl http://perldoc.perl.org/MIME/Base64.html
- in php http://php.net/manual/en/function.base64-encode.php
- 在纯 javascript 中，请参阅如何在 JavaScript 中将字符串编码为 Base64？
- 在 perl http://perldoc.perl.org/MIME/Base64.html
- 在 php http://php.net/manual/en/function.base64-encode.php
回答by acarlon
This allows you to just get the image data and set to the img src, which is cool.
这允许您只获取图像数据并设置为 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 );
The basic idea is that the data is returned untampered with, it is placed in a blob and then a url is created to that object in memory. See hereand here. Note supported browsers.
基本思想是，数据原封不动地返回，它被放置在一个 blob 中，然后在内存中为该对象创建一个 url。请参阅此处和此处。注意支持的浏览器。
