Canvas Pixel Manipulation
Pixel Manipulation with "getImageData" and "putImageData"
Introduction to "context.getImageData"
Html5 Canvas gives you the ability to fetch and change the color of any pixel on the canvas.
You can use Canvas's pixel manipulation to:
- Create a color-picker for an image or select a color on a color-wheel.
- Create complex image filters like blurring and edge detection.
- Recolor any part of an image at the pixel level (if you use HSL you can even recolor an image while retaining the important Lighting & Saturation so the result doesn't look like someone slapped paint on the image). Note: Canvas now has Blend Compositing that can also recolor an image in some cases.
- "Knockout" the background around a person/item in an image,
- Create a paint-bucket tool to detect and Floodfill part of an image (eg, change the color of a user-clicked flower petal from green to yellow).
- Examine an image for content (eg. facial recognition).
- For security reasons, getImageData is disabled if you have drawn an image originating on a different domain than the web page itself.
- getImageData is a relatively expensive method because it creates a large pixel-data array and because it does not use the GPU to assist its efforts. Note: Canvas now has blend compositing that can do some of the same pixel manipulations that getImageData does.
- For .png images, getImageData might not report the exact same colors as in the original .png file because the browser is allowed to do gamma-correction and alpha-premultiplication when drawing images on the canvas.
Getting pixel colors
Use getImageData to fetch the pixel colors for all or part of your canvas content. The getImageData method returns an imageData object
The imageData object has a .data property that contains the pixel color information. The data property is a Uint8ClampedArray containing the Red, Green, Blue & Alpha (opacity) color data for all requested pixels.
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website