javascript - How can I create a canvas imageData array from an arrayBuffer representation of a JPG

Question

First of all I am aware there are standard methods of achieving this (readAsDataURL and drawImage), but unfortunately they are not usable for this specific use case.

I am reading an image using the filereader API as an arraybuffer like so:

    var reader = new fileReader();
    reader.onload = function(e){

          var byteArray = new Uint8ClampedArray(e.target.result);
          //do stuff to this array
    }
    reader.readAsArrayBuffer(file);

I am then creating a clampedarray with this returned data.

What I want to be able to do is now draw this pixel array directly to a canvas using putImageData

Currently I am doing the following:

var byteArray = new Uint8ClampedArray(e.target.result);
var imgdata = ctx.createImageData(img.width, img.height);
var canvdata = imgdata.data;

for (var i = 0; i < canvdata.length; i += 4) {
    canvdata[i] = byteArray[i];
    canvdata[i + 1] = byteArray[i + 1];
    canvdata[i + 2] = byteArray[i + 2];
    canvdata[i + 3] = byteArray[i + 3];
}
ctx.putImageData(imgdata, 0, 0);

Using this method, although the data gets drawn to the canvas, it appears like garbled snow or noise and is not a correct representation of the image.

This leads me to believe that I am constructing the imagedata data incorrectly in my loop or perhaps my initial method of getting the pixel array is incorrect.

To summarize, I would like to be able to take an arraybuffer (of a jpeg) retrieved via the html5 fileReader API and then create a canvas compatible imageData array, so that it can later be pushed into a canvas using putImageData

Thanks in advance.

Answer 1

Edit

A JPEG file isn't a simple byte-array of colour data, and therefore you can't simply load it in like this. If you want to get around this without importing directly into a canvas you'll have to use a JPEG decoding library, such as this project by notmasteryet which I found via a quick google search.

Original

unfortunately they are not usable for this specific use case

Why are they not usable?

// example array
u = new Uint8ClampedArray(4);
u[0] = 255, u[1] = 56, u[2] = 201, u[3] = 8; // [255, 56, 201, 8]
// to String
str = String.fromCharCode.apply(null, u); // "?8é"
// to Base64
b64 = btoa(str); // "/zjJCA=="
// to DataURI
uri = 'data:image/jpeg;base64,' + b64; // "data:image/jpeg;base64,/zjJCA=="

And the reverse

// uri to Base64
b64 = uri.slice(uri.indexOf(',')+1);
// to String
str = atob(b64);
// to Array
arr = str.split('').map(function (e) {return e.charCodeAt(0);});
// to Uint8ClampedArray
u = new Uint8ClampedArray(arr); // [255, 56, 201, 8]