Sometimes, we want to get average color of image via JavaScript.
In this article, we’ll look at how to get average color of image via JavaScript.
How to get average color of image via JavaScript?
To get average color of image via JavaScript, we can put the image in a canvas and then use the canvas context getImageData
method.
For instance, we write
const getAverageRgb = (img) => {
const context = document.createElement("canvas").getContext("2d");
if (typeof img === "string") {
const img = new Image();
img.setAttribute("crossOrigin", "");
img.src = src;
img.onload = () => {
context.imageSmoothingEnabled = true;
context.drawImage(img, 0, 0, 1, 1);
console.log(context.getImageData(1, 1, 1, 1).data.slice(0, 3));
};
}
};
to define the getAverageRgb
function.
In it, we create a canvas element with createElement
and get its context with getContext
.
Then we create the img
image and set its onload
property to a function that gets the average rgb value with getImageData
.
Conclusion
To get average color of image via JavaScript, we can put the image in a canvas and then use the canvas context getImageData
method.