Build a Color Extraction Tool with JavaScript

In this video I explain how to use the HTML Canvas element to extract colour information from individual pixels as well as calculating the average colour over a range. Tools like this can be used when trying to generate a colour scheme from an image.
Code from video: gist.github.com/prof3ssorSt3v...
Playlist of videos about HTML5 Canvas:

[@Stoney_Eagle]

I was looking for a way to get the average of the whole image and found a "just copy me" video 😅 now that one makes sense by your explanation.
Thanks!

[@pesahson]

That's a cool looking little project!

[@NiIog]

Thanks! Now I can use this to identify colors in an image for a project!

[@anesdiaf]

Thanks sensei, lovely tutorial.

[@angladephil]

Great, thank you !!!
I would have declared the nums variable relative to the inset variable :
let nums =(inset+1)*(inset+1);

[@BKofficer23]

So the "shape" or "coverage area" that is calculating the average color, is actually just a plus-sign, so to speak, left, right, up, and down, from the central mouse pixel, and not a square around the central mouse pixel. Because it's not gathering the colors of the pixels diagonal to the central mouse pixel. The square is just something easier to see for the user. Hopefully if I'm wrong you'll correct me.

[@SteveGriffith-Prof3ssorSt3v3]

The average color is an average of every pixel in the square area, not just a plus sign.

[@BKofficer23]

​@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve. This is a bit over my head.

[@SteveGriffith-Prof3ssorSt3v3]

@@BKofficer23 give it time. With practice it won't be

[@WatcharaphanPongpan]

it is possible to have 3 on click events on 3 different locations of the image when those locations are fixed in place.

[@SteveGriffith-Prof3ssorSt3v3]

It is. Actually back in the late 90s this is what you had to do. You would define a with elements that defined hit areas within the image - developer.mozilla.org/en-US/docs/Web/HTML/Element/area - the image would have a usemap attribute that pointed to the map to use. Each area could have a click listener.
However, it has probably been 20 years since I did this.
Now, the approach that I would take is still having one click function for the whole image. The click event will provide the x and y coordinates where the user clicked. Based on those coordinates you can do whatever you want. This video talks about the coordinates from a click event - ruclips.net/video/hrYhX3KEQTc/видео.html

[@SnehaishChakrabortyLive]

Why the array index is multiplied by 4 to get the rgb value?

[@SteveGriffith-Prof3ssorSt3v3]

The pixel number is multiplied by 4 to get the first array index, which is the red value. There are four values for each pixel in the array.

[@dream_catcher97]

Is it possible to implement this in react native because some elements are like web based so its not work in android how to achieve this in react native?

[@SteveGriffith-Prof3ssorSt3v3]

A completely different approach would be needed in React Native. Like you said, the Canvas element is not supported. React Native uses a specific set of components that get translated into native components. If I were doing this in React Native then I would probably start with the Expo GL View docs.expo.dev/versions/latest/sdk/gl-view/

[@Z4nR]

How to get the excraction automatically without click the color?

[@SteveGriffith-Prof3ssorSt3v3]

There has to be an event that triggers saving the colour.

[@Z4nR]

@@SteveGriffith-Prof3ssorSt3v3 so when we assume that we input some image, it will trigger the event to extract the colour like that? It means the event while triggered in the input image function.

[@SteveGriffith-Prof3ssorSt3v3]

@@Z4nR if you want to hard code one point in the image that you are going to extract then the image load can be the trigger. If you want to pick the point then you are going to need to listen to the mouse events.