使用 JavaScript 获取图像的平均颜色
确定图像的平均颜色对于各种应用程序都很有价值,但它可能特别具有挑战性
JavaScript 实现
幸运的是,随着 HTML5 的进步,JavaScript 开发人员可以利用
<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>
用法
要获取图像的平均颜色,请调用 getAverageRGB 函数,传递图像元素作为参数。该函数返回一个具有红色、绿色和蓝色分量平均值的对象。
限制
此技术仅限于驻留在同一域上的图像,并且仅具有 HTML5 canvas 元素的浏览器支持。对于旧版本的 Internet Explorer,请考虑合并 excanvas 库以启用部分功能。
以上是如何使用 JavaScript 计算图像的平均颜色?的详细内容。更多信息请关注PHP中文网其他相关文章!