jQuery AJAX 요청에 대한 응답으로 PNG 이미지 표시

jQuery AJAX 요청에 대한 응답으로 PNG 이미지 표시

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 콜을 포함한 메인스크립트가 있습니다

  <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에 포함할 경로를 가져와 표시하는 것입니다.하지만 이미지/PNG 헤더가 있는 이미지는 AJAX 요청에서 직접 받을 수 있다고 생각했습니다.

base64로 인코딩된 이미지를 반송해야 합니다.이것 좀 봐주세요.http://php.net/manual/en/function.base64-encode.php

그런 다음 ajax 콜에서 성공 함수를 다음과 같이 변경합니다.

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

방법 1

Ajax 콜은 하지 말고 img 요소의 src를 이미지 URL로 입력합니다.

이것은, 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

이 명령어를 인코딩해야 합니다.dataBase64로 이동하면data:[<MIME-type>][;charset=<encoding>][;base64],<data>img src로

예를 들어 다음과 같습니다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot img" />

base64로 인코딩하려면:

• 플레인 javascript의 경우 JavaScript에서 문자열을 Base64로 인코딩하는 방법을 참조하십시오.
• in perl http://perldoc.perl.org/MIME/Base64.html
• in 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 = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

기본 개념은 데이터를 변경하지 않고 반환하고 데이터를 블럽에 배치한 다음 메모리 내의 해당 개체에 대한 URL을 생성하는 것입니다.여기랑 여기 보세요.지원되는 브라우저를 참고하십시오.

상기 답변과 Spring Boot 어플리케이션용 아래 솔루션을 좀 더 검색한 후에 생각해 낼 수 있었습니다.

HTML

<div class="row">
     <div class="col-11" id='img_div'>
     </div>
</div>

자바스크립트

function loadImage() {

        $.ajax({
            type: "GET",
            url: contextPath+"/loadImage",
            data: null,
            dataType: 'text',
            cache: false,
            timeout: 600000,
            success: function (data) {
                $('#img_div').html('<img id="img" src="data:image/png;base64,' + data + '" />');
                
            },
            error: function (e) {
                //handle error
            }
        });
    
    }

컨트롤러 방식

@GetMapping("/loadImage")
@ResponseBody
private String loadImagefromExternalFolder(HttpServletRequest request){     
    String encodedString = "";
    
    try {       
        RandomAccessFile f =  new RandomAccessFile("C:\\your_folder_path\\your_img.PNG", "r");
        byte[] b = new byte[(int)f.length()];
        f.readFully(b);
        
        encodedString = Base64.getEncoder().encodeToString(b);

    }catch (Exception e) {
        // handle error
    }


    return encodedString;
    
}

2022년 갱신:blobs 사용 - 더 이상 base64로 변환하는 데 시간과 대역폭을 낭비할 필요가 없습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Response#fetching_an_image 의 예를 다음에 나타냅니다.

const image = document.querySelector('.my-image');
fetch('flowers.jpg')
.then(response => response.blob())
.then(blob => {
  const objectURL = URL.createObjectURL(blob);
  image.src = objectURL;
});

언급URL : https://stackoverflow.com/questions/10802312/display-png-image-as-response-to-jquery-ajax-request