Is it possible to convert FileReader readAsArrayBuffer data into html5 canvas compatible imageData

Question

I'm looking for a way to draw an image to a canvas directly from the html5 FileReader api.

The usual method is to create a new image object, wait for onload and then draw it to the canvas with drawImage().

However for a specific case which I do not need to go into I would like to bypass the loading of the image data completely if at all possible.

Since the filereader api supports readAsArrayBuffer() I was wondering if there is any way I could take this arraybuffer and convert it into canvas imageData in order to use ctx.putImageData(array) to render the image.

Thanks in advance.

Graham · Accepted Answer · 2013-03-14 13:05:03Z

2

Loading the image is a neccessary step I think; at one end of the process you just have a binary blob which could be a JPEG or PNG (or BMP, any other mime type), while at the other you have an array containing raw pixel data. While you could technically code this conversion yourself, the fileReader.readAsDataURL and ctx.drawImage methods do this for you internally.

FWIW, his is how I draw an image to canvas.

// read binary data from file object
var fileRead = function(file){
    var reader = new FileReader();
    reader.onload = fileReadComplete;
    reader.readAsDataURL(file);
    };

// convert binary data to image object
var fileReadComplete = function(e){
    var img = new Image();
    img.src = e.target.result;
    (function(){
        if (img.complete){
            ctx.drawImage(img);
            }
        else {
            setTimeout(arguments.callee, 50);
            }
        })();
    };

answered Mar 14, 2013 at 13:05

Graham

6,5822 gold badges39 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gordyr Over a year ago

That's pretty much how I do it also. I've played around with using createimagedata and looping through a typedarray but the image comes out garbled. It's a shame because this would be perfect for this particular application within a webworker. It would allow being able to send huge images to the worker without having to clone it. Thanks anyway. I'll mark the question as answered as soon as I am able.

Collectives™ on Stack Overflow

Is it possible to convert FileReader readAsArrayBuffer data into html5 canvas compatible imageData

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related