Canvas get image data method and related topics
So when it comes to working with canvas there is the get image data method that can be used to get image data from the current and area in the state of a canvas matrix in the from of an ImageData) class instance that has an unit8Clamped array in a data property that is the raw data for each color channel of each pixel in an area of interest. In addition there is also the put image data method also that is the inversion of that method that can be used to put that data back into a canvas.
1 - Get image data basic example
Now that we have that out of the way lets look at the basic.js file.
What is returned is an instance of the ImageData constructor that will contain all the pixel data in the data property of the ImageData instance. So speaking of the data property an instance of this constructor has three public properties a data property that contains the actual image data as mentioned, along with a width property, and height property of the section that was grabbed from the canvas. That is about it though when it comes to getting data at least, there are no public methods for the class actually. However there is of course making some depending on what it is that I want or need to do with that data naturally.
1.1 - The imageData.data array
The ImageData instances data property is an instance of a Unit8ClampedArray that is just a single dimensional or linear array. Because of this the image data from each pixel is in the form of a repeating RGBA order where the first element is a byte value for the red channel of the first pixel, the second element is the green channel, then the blue channel, and finally the alpha channel of the first pixel in the upper left corner.
2 - Put image data example
So once I have an instance of ImageData I can then do something with that data, but regardless if I do something with it or not when I am done I might want to draw that data back to a canvas element. So with that said placing image data back down onto the canvas is of course where the put image data method comes into play. I just need to call the method off of the instance of the 2d drawing context, and then pass the image data object as the first argument followed by an x and y position where I want to drawing of the data to start.
3 - ImageData constructor example
I might want to just create an instance of ImageData by itself without having to use the get image data method to do so first. In this case I just need to use the ImageData constructor and pass a Unit8ClampedArray as the first argument followed by a width and height value.
I can then use the put image data method to place this instance down onto the canvas. So then this constructor along with the put image data method can be used to create a canvas powered pset qBasic style type method for example. I can also use it as a way to create a sprite sheet by way of some external JSON data rather than external image files, and so forth.
4 - Conclusion
So the get image data method is a built in way to get image data from a canvas element. In addition the image data object standard is a nice way to go about creating image data from scratch also. In any case the put image data method can also be used to draw image data back down onto a canvas element.
There are many applications that come to mind when it comes to using these methods such as filters, creating images from data, and clever ways to go about hiding data within images when it comes to Steganography just to name a few ideas when it comes to where to go from here with this.