Get Average Color of Image in JavaScript
Problem:
Is it possible to determine the average color of an image using JavaScript?
Solution:
While it may not be immediately apparent, you can indeed calculate the average color of an image using JavaScript. The key to achieving this is through the utilization of the HTML5
To extract the average color from an image, follow these steps:
Here is an example function that implements the described algorithm:
<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>
This function takes an image element as input and returns an object containing the average red, green, and blue values as integers.
The above is the detailed content of How to Calculate the Average Color of an Image Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!