在 JavaScript 中获取图像的平均颜色
问题：
是否可以确定使用 JavaScript 计算图像的平均颜色？
解决方案：
虽然可能不是很明显，但您确实可以使用 JavaScript 计算图像的平均颜色。实现这一点的关键是通过使用 HTML5
要从图像中提取平均颜色，请按照以下步骤操作：
以下是实现所描述算法的示例函数：
<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>此函数将图像元素作为输入，并返回一个包含平均红色、绿色和蓝色值作为整数的对象。
以上是如何使用 JavaScript 计算图像的平均颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！
