web-dev-qa-db-ja.com

jQuery AJAXリクエストへの応答としてPNG画像を表示する

HTMLのメインストリームでjQuery AJAX呼び出しによって返された画像を表示することは可能ですか？

ヘッダー付きの画像（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が1つあり、画像で埋められます。

何が間違っているのかわかりません。もう1つの解決策は、スクリプトでディスクにイメージを書き込み、srcに含めるパスを取得して表示することです。しかし、AJAXリクエストから直接image/PNGヘッダーを持つ画像を取得することが可能であると考えていました。

jqueryajaximageheaderrequest
28
ZheFrench

Base64でエンコードされた画像を送り返す必要があります。これを見てください http://php.net/manual/en/function.base64-encode.php

次に、ajax呼び出しで、成功関数を次のように変更します。

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');
40
Timm

方法1

Ajax呼び出しを行うべきではなく、画像のurlとしてimg要素のsrcを置くだけです。

これは、POSTではなくGETを使用する場合に役立ちます。

<script type="text/javascript" > 

  $(document).ready( function() { 
      $('.div_imagetranscrits').html('<img src="get_image_probes_via_ajax.pl?id_project=xxx" />')
  } );

</script>

方法2

その画像に対してPOSTを実行し、クライアント側で画像の内容を解析しようとすると、次のようなものを試すことができます： 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にエンコードするには：

20
jperelli

これにより、画像データを取得して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 );

基本的な考え方は、データが改ざんされずに返され、ブロブに配置されてから、メモリ内のそのオブジェクトにURLが作成されるということです。 here および here を参照してください。サポートされているブラウザに注意してください。

7
acarlon