Jpeg, PNG, GIF -> pixel data array. How to get an array from an image on the client?

Question

JavaScript

Hello!
Tell me how you can decode Jpeg, PNG and GIF into an array of colors?
And how to load an image into the browser not by URL, but from the client machine, through the File Open Dialog. No flash and no server.

What browsers support?

I would be grateful for any information.

Answer 1

We put input type="file", through which we get the path to the file (or you can look towards fileapi ).
Using canvas you can load an image, get the height and width, and get the color of a particular pixel via context.getImageData(see stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover ).

Answer 2

Try: http://raphaeljs.com/

Answer 3

Alternatively: http://paperjs.org/ .
Here is a drag & drop example: http://paperjs.org/examples/q-bertify/ . The authors write that it works in Webkit, Firefox, Chrome and IE 10.