The average color of an image can be found with JavaScript by drawing the image on a canvas element. The following steps have to be performed to get the average color of an image:
1. The image is first drawn on the canvas using the method context.drawImage() of the Canvas 2D API. This method takes in the image and the dimensions as parameters and draws it to the canvas.
Syntax:
context.drawImage( img, width, height );
2. The image data of the canvas is returned using the context.getImageData() method. It returns an ImageData object representing the pixel data for a specified section of the canvas.Â
Syntax:
context.getImageData( x, y, width, height )
3. The average red, green and blue colors are then calculated with this image data by adding all the color values separately and finding the average value of that color.
Example:
html
<!DOCTYPE html><html lang="en">Â
<head>    <title>        Find Average Color of        image via JavaScript?    </title>Â
    <style>        #img {            position: absolute;            top: 20%;            left: 25%;        }Â
        #block {            position: absolute;            background-color: white;            height: 70px;            width: 70px;            left: 50%;            top: 25%;        }    </style></head>Â
<body>Â Â Â Â <img height="100px" width="150px"Â Â Â Â Â Â Â Â id="img" src=Â Â Â Â Â Â Â Â "image_to_find_average_color.png">Â
    <div id="block"></div>Â
    <!-- Function to find the average color -->    <script>        function averageColor(imageElement) {Â
            // Create the canvas element            var canvas                = document.createElement('canvas'),Â
                // Get the 2D context of the canvas                context                    = canvas.getContext &&                    canvas.getContext('2d'),                imgData, width, height,                length,Â
                // Define variables for storing                // the individual red, blue and                // green colors                rgb = { r: 0, g: 0, b: 0 },Â
                // Define variable for the                 // total number of colors                count = 0;Â
            // Set the height and width equal            // to that of the canvas and the image            height = canvas.height =                imageElement.naturalHeight ||                imageElement.offsetHeight ||                imageElement.height;            width = canvas.width =                imageElement.naturalWidth ||                imageElement.offsetWidth ||                imageElement.width;Â
            // Draw the image to the canvas            context.drawImage(imageElement, 0, 0);Â
            // Get the data of the image            imgData = context.getImageData(                        0, 0, width, height);Â
            // Get the length of image data object            length = imgData.data.length;Â
            for (var i = 0; i < length; i += 4) {Â
                // Sum all values of red colour                rgb.r += imgData.data[i];Â
                // Sum all values of green colour                rgb.g += imgData.data[i + 1];Â
                // Sum all values of blue colour                rgb.b += imgData.data[i + 2];Â
                // Increment the total number of                // values of rgb colours                count++;            }Â
            // Find the average of red            rgb.r                = Math.floor(rgb.r / count);Â
            // Find the average of green            rgb.g                = Math.floor(rgb.g / count);Â
            // Find the average of blue            rgb.b                = Math.floor(rgb.b / count);Â
            return rgb;        }Â
        // Function to set the background        // color of the second div as         // calculated average color of image        var rgb;Â
        setTimeout(() => {            rgb = averageColor(                document.getElementById('img'));Â
            // Select the element and set its            // background color            document                .getElementById("block")                .style.backgroundColor =                'rgb(' + rgb.r + ','                + rgb.g + ','                + rgb.b + ')';        }, 500)    </script></body>Â
</html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
