How to get the pixel data of an PNG downloaded using XMLHttpRequest (XHR2)

Question

I am using this code from https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

I am using it to download a png file which I then want to display in a Canvas element. I realise there are easier ways to do this, but I need to be able to manipulate the pixels so I would really like to have the pixel data in a TypedArray, also I have tried loading it using a regular DOM Image object, drawing it to canvas and using getImageData() but it too slow (it's a large image) - so now I am trying this method, what I get from the load is what I assume is the compressed data, so my question is - is there a quick way to decompress/inflate this data to get the image pixel data, or am I just plain wrong to try this?

thats a fair answer to my original question, I've adapted it now as I realise it was not clear, what I really need is the pixel data of the downloaded PNG in the same way as if I used getImageData on the 2D canvas - I would get a typedArray of values with 4 bytes for each pixel.... I do appreciate your answer though and it may help me find my way, thank you — James Cat, Aug 30 '13 at 09:45
I've just discovered that whilst it is taking over 2 minutes on my ubuntu machine running firefox to do the getImageData on the PNG it only takes 5 seconds on my wifes windows vista machine, so I will probably stick with the getImageData method. thanks for all help — James Cat, Aug 30 '13 at 09:58
the real problem is this: https://bugzilla.mozilla.org/show_bug.cgi?id=550845&hide_resolved=1 :-( — James Cat, Aug 30 '13 at 10:15
about:config then fine gfx.xrender.enabled and set to false caused speed up of getImageData from 2 minutes to 4 seconds. — James Cat, Aug 30 '13 at 10:21

Luan Castro · Accepted Answer · 2013-08-30T00:48:50.983

you can make a base64 and set to src of a image... like below

var oReq = new XMLHttpRequest();
oReq.open("GET", "https://npmjs.org/static/npm.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {

  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  var binaryString = '';

  if (arrayBuffer) {

    var byteArray = new Uint8Array(arrayBuffer);

    for (var i = 0; i < byteArray.byteLength; i++) {

      binaryString += String.fromCharCode( byteArray [ i ] ); //extracting the bytes

    }

    var base64 = window.btoa( binaryString ); //creating base64 string


    img.src = "data:image/png;base64," + base64; //creating a base64 uri

  }
};

oReq.send(null);

a working jsfiddle... -> http://jsfiddle.net/Castrolol/mHv4b/

Thanks, I'll give that a whirl. Annoying that the example on Mozilla Developer Network and html5rocks.com of binary downloading into a typed array both use the example of downloading a png but go no further in showing you how to use that data, browser obviously can do png decompress but there's no api to access to that. Thanks again, I'll get to testing... — James Cat, Aug 30 '13 at 08:45

How to get the pixel data of an PNG downloaded using XMLHttpRequest (XHR2)

1 Answers1