javascript - Draw ajax arraybuffer response into canvas -

hello request image server (binay, arraybuffer) , convert arraybuffer valid imagedata can drawn on canvas element.

besides imagedata made ajax request, have other imagedata objects combine on canvas (in order flatten image) , produce final image. imagedata mentioned above server request results in pure noise i"m not sure i'm doing wrong create valid imagedata.

here method tries convert arraybuffer imagedata without success.

imageprocessor.prototype.imagedata = function(data, width, height) {      width = width || this.settings.width;     height = height || this.settings.width;      var newdata = (data instanceof uint8clampedarray) ? data : new uint8clampedarray(data);     var imagedata = this.ctx.createimagedata(width, height);      imagedata.data.set(newdata);      return imagedata;  }; 

ps: i've managed convert arraybuffer b64 image resource-url , create image out of , draw th image on canvas element, i'm not interested in such solution because:

1. overkill in opinion

2. uses callbacks

update

the images on server .png files (rgba).

and bellow ajaxtransport used jquery in order binary - arraybuffer requests images server:

$.ajaxtransport("+binary", function(options, originaloptions, jqxhr){     // check conditions , support blob / arraybuffer response type     if (window.formdata && ((options.datatype && (options.datatype == 'binary')) || (options.data && ((window.arraybuffer && options.data instanceof arraybuffer) || (window.blob && options.data instanceof blob)))))     {         return {             // create new xmlhttprequest             send: function(_, callback){                 // setup variables                 var xhr = new xmlhttprequest(),                     url = options.url,                     type = options.type,                     // blob or arraybuffer. default blob                     datatype = options.responsetype || "blob",                     data = options.data || null;                  xhr.addeventlistener('load', function(){                     var data = {};                     data[options.datatype] = xhr.response;                     // make callback , send data                     callback(xhr.status, xhr.statustext, data, xhr.getallresponseheaders());                 });                  xhr.open(type, url, true);                 xhr.responsetype = datatype;                 xhr.send(data);             },             abort: function(){                 jqxhr.abort();             }         };     } }); 

you can use blob , blob-url set image source. better using base-64 , data-uri don't need convert binary data string, , (internally).

the data cannot set directly imagedata object when exist in file container, "file" (byte-array) must parsed, decompressed, decoded , converted first.

example:

var blob = new blob([arraybufferhere], {type: "image/png"}); // set proper mime-type  var domurl = self.url || self.webkiturl || self,     url = domurl.createobjecturl(blob),     img = new image;  img.onload = function () {     domurl.revokeobjecturl(url);  // clean     // = image }; img.src = url; 

demo

// load file:  fetch("http://i.imgur.com/rueqdje.png", convert, alert);    function convert(buffer) {    var blob = new blob([buffer], {type: "image/png"});      var domurl = self.url || self.webkiturl || self,      url = domurl.createobjecturl(blob),      img = new image;      img.onload = function() {      domurl.revokeobjecturl(url); // clean      document.body.appendchild(this);      // = image    };    img.src = url;  }    function fetch(url, callback, error) {      var xhr = new xmlhttprequest();    try {      xhr.open("get", url);      xhr.responsetype = "arraybuffer";      xhr.onerror = function() {        error("network error")      };      xhr.onload = function() {        if (xhr.status === 200) callback(xhr.response);        else error(xhr.statustext);      };      xhr.send();    } catch (err) {      error(err.message)    }  }

(optionally, can use png-toy decode raw bitmaps)