Вопрос по ajax, request, image, jquery, header – Отобразить изображение PNG в ответ на запрос jQuery AJAX

27

Можно ли отобразить изображение, возвращенное вызовом jQuery AJAX, в основном потоке вашего HTML?

У меня есть скрипт, который рисует изображение с заголовком (изображение / PNG). Когда я просто вызываю его в браузере, изображение отображается.

Но когда я выполняю AJAX-вызов с помощью jQuery для этого сценария, я не могу отобразить чистое изображение, у меня есть что-то с множеством странных символов. Это мой скрипт, который делает изображение с заголовком (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-файле у меня есть один div сclass="div_imagetranscrits" быть заполненным моим изображением.

Я не вижу, что я делаю неправильно. Другое решение - заставить мой скрипт записать образ на диск и просто получить путь для включения в src для его отображения. Но я думал, что можно получить изображение с заголовком image / PNG напрямую из запроса AJAX.

Ваш Ответ

3   ответа
20

Method 1

Вы не должны делать вызов ajax, просто поместите src элемента img в качестве 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>

Method 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:

7

Это позволяет вам просто получить данные изображения и установить в 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-адрес для этого объекта в памяти. УвидетьВот а такжеВот, Обратите внимание на поддерживаемые браузеры.

@BbIKTOP: Возможно, вы используете какой-то старый браузер?caniuse.com/#feat=bloburls
"Не удалось выполнить" createObjectURL " на «URL»: не найдено ни одной функции, которая бы соответствовала предоставленной подписи. & quot;
@ Михаил Шепер Не для меня на самом деле, но для корпоративных клиентов это так обычно, будьте рады, что вы никогда не делали большие проекты для крупных корпораций;)
@BbIKTOP: если такие случаи являются «обычными»; для тебя достаточно справедливо. Но я надеялся помочь выяснить, почему это решение не работает для вас, поскольку оно работает для меня. Многие проекты в наши дни предназначены для использования в интрасети и допускают спецификации, такие как «Мы не поддерживаем IE». Для тех, кажется, этот ответ является победителем.
@ Михаил Шепер Это было месяц назад, я не помню, какой это был браузер. Я использую последние chrome, ff, safari и т. Е. В win7 для тестирования, так что, возможно, это был один из них) В любом случае, обычно разработчики не могут полагаться на тот факт, что все пользователи имеют последние версии. Итак, я бы хотел посоветовать метод src = "data: image / png; base64," + request.response
40

Вам нужно будет отправить изображение обратно в кодировке base64, посмотрите на это:http://php.net/manual/en/function.base64-encode.php

Затем в вашем вызове ajax измените функцию успеха на следующую:

$('.div_imagetranscrits').html('<img src="data:image/png;base64,' + data + '" />');
Пытатьсяdata:image/jpeg;base64 на местеdata:image/png;base64
Что делать, если я хочу изображение в формате JPEG?
Да, я только что узнал! Это прекрасно работает, спасибо. Но теперь, если вы хотите вызвать свой скрипт в браузере, он не будет работать, если вы не сделали трюк в своем коде с помощью get params ... для param ('mode & apos;) = 1 вы кодируете, и если param (' mode 'apos) ;) не определено, вы печатаете просто свой заголовок изображения / png ... в любом случае. Теперь это работает, это здорово. Я тоже нашел этот путь,jquery topic loading image ajax но моя точка зрения в том, что это ужасно. Ваш метод намного лучше. Благодарю. ZheFrench

Похожие вопросы