(Javascript) Konwertuj bajt [] na obraz

Question

Używając JavaScript, robię wywołanie AJAX do usługi WCF i zwraca tablicę bajtów. Jak mogę przekonwertować to na obraz i wyświetlić go na stronie internetowej?

Answer 1

Zamiast wywoływania usługi AJAX użyć Javascript zbudować element obrazu i skierować go do służby bezpośrednio ...

var img = document.createElement("IMG"); 
img.src = "http://url/to/service"; 
img.alt = "ALT TEXT"; 
document.body.appendChild(img); 

Wystarczy upewnić się, że usługa ustawia typ zawartości prawidłowo.

Answer 2

Pewnie można chcieć stworzyć data-uri ze swoimi danymi i umieścić go w atrybucie src elementu img

http://en.wikipedia.org/wiki/Data_URI_scheme

Answer 3

Zdaję sobie sprawę, że jest to stary wątek, ale udało mi się zrobić to za pośrednictwem wywołania AJAX na usługi internetowej i myślałem, że będę dzielić ...

• mam obraz w mojej strony już:

  <img id="ItemPreview" src="" /> 
  

• AJAX:

  $.ajax({ 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json', 
       timeout: 10000, 
       url: 'Common.asmx/GetItemPreview', 
       data: '{"id":"' + document.getElementById("AwardDropDown").value + '"}', 
       success: function (data) { 
        if (data.d != null) { 
         var results = jQuery.parseJSON(data.d); 
         for (var key in results) { 
          //the results is a base64 string. convert it to an image and assign as 'src' 
          document.getElementById("ItemPreview").src = "data:image/png;base64," + results[key]; 
         } 
        } 
       } 
      }); 
  

Mój kod 'GetItemPreview' odpytuje serwer SQL, gdzie mam obraz zapisany jako ciąg base64 i zwraca to pole jako 'wyników':

 string itemPreview = DB.ExecuteScalar(String.Format("SELECT [avatarImage] FROM [avatar_item_template] WHERE [id] = {0}", DB.Sanitize(id))); 
    results.Add("Success", itemPreview); 
    return json.Serialize(results); 

magia jest w zaproszeniu AJAX na tej linii:

 document.getElementById("ItemPreview").src = "data:image/png;base64," + results[key]; 

Ciesz się!

Answer 4

Wystarczy odesłać go jako Base64 potem po prostu:

var sig = new Image; 
sig.src = 'data:image/png;base64,' + $('#Signature').val(); 

W moim przypadku używam HiddenInput z Id z Signature przechowywać że Base64 dane

Answer 5

Oto źródło JavaScript, żeby dekodować PNG, JPEG i GIF bajty obrazu, przy użyciu schematu URI danych:

Images.decodeArrayBuffer = function(buffer, onLoad) { 
    var mime; 
    var a = new Uint8Array(buffer); 
    var nb = a.length; 
    if (nb < 4) 
     return null; 
    var b0 = a[0]; 
    var b1 = a[1]; 
    var b2 = a[2]; 
    var b3 = a[3]; 
    if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4E && b3 == 0x47) 
     mime = 'image/png'; 
    else if (b0 == 0xff && b1 == 0xd8) 
     mime = 'image/jpeg'; 
    else if (b0 == 0x47 && b1 == 0x49 && b2 == 0x46) 
     mime = 'image/gif'; 
    else 
     return null; 
    var binary = ""; 
    for (var i = 0; i < nb; i++) 
     binary += String.fromCharCode(a[i]); 
    var base64 = window.btoa(binary); 
    var image = new Image(); 
    image.onload = onLoad; 
    image.src = 'data:' + mime + ';base64,' + base64; 
    return image; 
} 

Answer 6

Używanie jQuery jako przykładu:

var myImage = $('< img src="data:image/jpg; base64," + bytesarray + "/>"');