Get Average Color of Image using JavaScript
Determining the average color of an image is valuable for various applications, but it can be particularly challenging to accomplish this task using JavaScript.
JavaScript Implementation
Fortunately, with the advancements in HTML5, JavaScript developers can leverage the
<code class="javascript">function getAverageRGB(imgEl) { var blockSize = 5, // only visit every 5 pixels defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs canvas = document.createElement('canvas'), context = canvas.getContext && canvas.getContext('2d'), data, width, height, i = -4, length, rgb = {r:0,g:0,b:0}, count = 0; if (!context) { return defaultRGB; } height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; context.drawImage(imgEl, 0, 0); try { data = context.getImageData(0, 0, width, height); } catch(e) { /* security error, img on diff domain */ return defaultRGB; } length = data.data.length; while ( (i += blockSize * 4) < length ) { ++count; rgb.r += data.data[i]; rgb.g += data.data[i+1]; rgb.b += data.data[i+2]; } // ~~ used to floor values rgb.r = ~~(rgb.r/count); rgb.g = ~~(rgb.g/count); rgb.b = ~~(rgb.b/count); return rgb; }</code>
Usage
To obtain the average color of an image, call the getAverageRGB function, passing the image element as an argument. The function returns an object with the average values for red, green, and blue components.
Limitations
This technique is restricted to images residing on the same domain and is only supported by browsers that feature the HTML5 canvas element. For older versions of Internet Explorer, consider incorporating the excanvas library to enable partial functionality.
The above is the detailed content of How can I calculate the average color of an image using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!