(Javascript) Convertir byte [] a imagen

Question

Al usar Javascript, estoy haciendo una llamada AJAX a un servicio WCF y está devolviendo una matriz de bytes. ¿Cómo puedo convertir eso en una imagen y mostrarla en la página web?

Answer 1

lugar de llamar al servicio con AJAX, Javascript utilizar para construir un elemento de imagen y el punto al servicio directamente ...

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

Sólo asegúrese de que el servicio establece el tipo de contenido correctamente.

Answer 2

Es probable que desee crear una técnica de URI de sus datos y ponerlo en el atributo src de un elemento img

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

Answer 3

Soy consciente de que es un hilo viejo, pero me las arreglé para hacer esto a través de una llamada AJAX en un servicio web y pensé en compartir ...

• tengo una imagen en mi página ya:

  <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]; 
         } 
        } 
       } 
      }); 
  

Mi código 'GetItemPreview' consulta un servidor SQL en la que tengo una imagen almacenada como una cadena de base 64 y devuelve ese campo como los 'resultados':

 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); 

la magia está en la llamada AJAX en esta línea:

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

¡Disfrútalo!

Answer 4

Sólo tiene que enviar de nuevo como un Base64 entonces simplemente:

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

En mi caso estoy usando un HiddenInput con un Id de Signature a almacenar esa Base64 datos

Answer 5

Aquí es fuente JavaScript para decodificar Bytes de imagen PNG, JPEG y GIF, utilizando el esquema de URI de datos:

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

Uso de jQuery como ejemplo:

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