ajax 传递arraybuffer,javascript - Draw ajax arraybuffer response into canvas - Stack Overflow

Hello I request an Image from my server (binay, arraybuffer) and then I would like to convert that arraybuffer to valid imageData that can be drawn on any canvas element.

Besides the imageData made from the ajax request, I also have other imageData objects which I combine all together on a canvas (in order to flatten the image) and produce my final image. However the imageData as mentioned above from the server request results in pure noise I"m not sure what I'm doing wrong to create valid imageData.

Here is my method that tries to convert the arraybuffer into 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 to convert the arrayBuffer into a b64 image resource-URL and then create an image out of it and then draw th image on to the canvas element, but I'm not interested in such a solution because:

overkill in my opinion

uses callbacks

UPDATE

The images on the server are .png files (RGBA).

And bellow is the ajaxTransport used with jQuery in order to do the binary - arraybuffer requests for images from the server:

$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){

// check for conditions and support for 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 all variables

var xhr = new XMLHttpRequest(),

url = options.url,

type = options.type,

// blob or arraybuffer. Default is blob

dataType = options.responseType || "blob",

data = options.data || null;

xhr.addEventListener('load', function(){

var data = {};

data[options.dataType] = xhr.response;

// make callback and 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();

}

};

}

});