Wie konvertiert ein byte-array in ein Bild?

Ich weiß, dies ist ein Alter thread, aber ich schaffte es durch einen AJAX-Aufruf über einen web-service und dachte, ich würde teilen...

• Habe ich ein Bild in meine Seite schon:

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

Mein 'GetItemPreview' code-Abfragen einer SQL server-wo ich ein gespeichertes Bild als base64-string und gibt das Feld als die "Ergebnisse":

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

Die Magie ist in der AJAX-Aufruf in dieser Zeile:

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

Genießen!

Hier ist der JavaScript-Quellcode zu entschlüsseln, PNG -, JPEG-und GIF-Bild-bytes mit den Data-URI-Schema:

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

Schicken Sie es einfach zurück, wie ein Base64 dann nur:

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

In meinem Fall bin ich mit einem Hidden Input mit einem Id von Signature zu speichern, dass Base64 Daten

Konvertierung der byte-array base64, wenn Sie den binären byte-array ist lächerlich teuer, und noch wichtiger, es ist völlig überflüssige Arbeit, da Sie nicht zu tun haben, konvertieren Sie es auf allen modernen Browsern! Die statische URL.createObjectURL Methode erstellt eine DOMString eine kurze browser-spezifische url, die aus dem byte-array, und Sie können die sich daraus ergebenden kurzen string in img.src oder ähnliches.

Dies ist unendlich schneller als Lösungen, in denen die Verkettung TextEncoder und btoa wenn alles, was Sie brauchen, ist, um ein Bild anzuzeigen, die er in einem byte-array form.

var blob = new Blob( [ uint8ArrayBuffer ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );

Dies ist mithilfe von HTML5-APIs, und so nicht auf Knoten oder andere JS-basierten Servern, natürlich.

JS:

//Simulate a call to Dropbox or other service that can
//return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

//Use PlaceKitten as a sample image to avoid complicating
//this example with cross-domain issues.
xhr.open( "GET", "https://placekitten.com/200/140", true );

//Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    //Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
};

xhr.send();

HTML:

<h1>Demo of displaying an ArrayBuffer</h1>
<p><a href="http://jsfiddle.net/Jan_Miksovsky/yy7Zs/">Originally made by Jan Miksovsky</p>
<img id="photo"/>