Jak umieścić dane binarne png w znaczniku img i wyświetlić je jako obraz?

Question

Używam tego

 $.ajax({ 
      type: "GET", 
      url: 'template/bump1/purse.png', 
      datatype:"image/png", 
      success: function (data) { 


       var reader = new FileReader(); 

       reader.onload = function (e) { 
        var img = document.getElementById("CaptchaImg"); 
        img.src = e.target.result; 
       }; 
       reader.readAsDataURL(data); 


       //$('#CaptchaImg').attr('src', data); 
      } 
     }); 

pobrać obraz, i to wychodzi w formacie binarnym, wygląda tak

node.js wraca jako

     WriteHeaderMode('image/png', res, 200); 
         res.end(data, 'binary'); 

Ale teraz, jak umieścić to w tagu obrazu i pokazać go jako obraz. Uwaga: I nie chcę, aby miał dane zwracane jako kodowanie base64, musi być binarny. Jestem w porządku, konwertując plik binarny na base64 po stronie klienta.

Po przekazaniu go do readAsDataURL, podano wyjątek TypeError.

Dzięki

EDIT

   var img = document.getElementById("CaptchaImg"); 

        var reader = new FileReader(); 

        reader.onload = function(e) { 
         //img.src = e.target.result; 
         $("body").html(e.target.result); 
        }; 

        reader.readAsDataURL(new Blob([data])); 

to wydaje się przekształcić go w kodowaniu base64, która rozpoczyna się data:application/octet-stream;base64, ale nie wyświetla obrazu ...

Answer 1

Spróbuj użyć zamiast new Blob(data, {type : 'image/png'})new Blob([data])

Zapewni to, że typ multimediów obiektu blob ma wartość png.

Źródło: https://developer.mozilla.org/en-US/docs/Web/API/Blob

Answer 2

jQuery Ajax nie wymaga odpowiedzi binarny (okay now it does) jest trick który wykorzystuje overrideMimeType ('text/zwykły; charset = x zdefiniowany przez użytkownika'), aby powrócić każdy bajt w postaci znak w łańcuchu odpowiedzi, a następnie w pętli przez odpowiedź, aby utworzyć tablicę bajtów danych.

Jednak z gołym nagim XMLHttpRequest można to łatwo zrobić za pomocą właściwości responseType.

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){ 
     var img = document.getElementById("CaptchaImg"); 
     var url = window.URL || window.webkitURL; 
     img.src = url.createObjectURL(this.response); 
    } 
} 
xhr.open('GET', 'template/bump1/purse.png'); 
xhr.responseType = 'blob'; 
xhr.send(); 

Answer 3

odpowiedź Musa jest doskonałym rozwiązaniem, I wdrożone coś podobnego w kanciaste i działa świetnie, podczas definiowania responseType = 'blob' Twoja odpowiedź nie będzie ciągiem już, że będzie to obiekt typu blob. Po prostu potrzebowałem dodać dodatkowy parametr do obiektu nagłówków (nie wiem, czy jest to konieczne w jQuery). headers: {'Content-Type': "image/png"}, Moje pełne żądanie obiektu:

var request = { 
      url: "_/get_image_/get", 
      method:"GET", 
      headers: {'Content-Type': "image/png"}, 
      responseType: 'blob' 
     }