Javascript: Render PNG stored as Uint8Array onto Canvas element without Data URI

Question

I'm trying to render a PNG image that is stored in a javascript Uint8Array. The code that I originally tried was the following:

var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);

var pageImg = new Image();
pageImg.onload = function(e) {

    // Draw onto the canvas
    canvasContext.drawImage(pageImg, 0, 0);

};

// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());

However, I found that for some reason the onload function was never running (I had breakpoints set up in chrome and it simply never hit). I found that if I set the src to a URL instead of Data URI, it worked correctly. However, due to some constraints, I cannot directly refer to the image's URL, i.e., it must be loaded from the UInt8Array.

Also, to complicate things slightly more, these images may be megabytes in size. From what I have read, there are compatibility issues with attempting to use Data URIs for very large images. Because of this, I am extremely hesitant to utilize them.

The question, therefore, is how do I render this byte array as a PNG onto a canvas context without using Data URIs or referring directly to the image URL?

---

I've also tried using something like the following to manipulate the image data directly using the putImageData function. Keep in mind that I don't 100% understand how this function works

var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
    imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);

It was lifted from a blog whose tab I have since closed, so apologies to the inspiration for not giving appropriate credit.

---

Also, while slowly hammering away at this thing, I ran into an error in Chrome SECURITY_ERR: DOM Exception 18. Turns out that, as soon as an image is loaded inot a canvas using drawImage, it cannot be retrieved without some additional workarounds. A Chromium Blog post on the topic was especially useful

Answer 1

If you already have a UInt8Array, you should consider using Blob and createObjectURL; createObjectURL allocates a special URL that allows the browser to access an internally created blob of binary data as though it were a file being loaded externally.

Where it is supported, createObjectURL is an excellent alternative to huge data URIs. You may still need to fall back to use of data URIs in Opera, IE<10, and all but the most recent versions of mobile browsers.

var myArray; //= your data in a UInt8Array
var blob = new Blob([myArray], {'type': 'image/png'});
var url = URL.createObjectURL(blob); //possibly `webkitURL` or another vendor prefix for old browsers.