通过Javascript获取图像的平均颜色 [英] Get average color of image via Javascript
本文介绍了通过Javascript获取图像的平均颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
不确定这是否可行,但希望编写一个脚本,该脚本将返回平均值 hex
或 rgb
值对于图像。我知道它可以在AS中完成,但希望在JavaScript中完成。
Not sure this is possible, but looking to write a script that would return the average hex
or rgb
value for an image. I know it can be done in AS but looking to do it in JavaScript.
推荐答案
AFAIK,唯一的方法是使用< canvas />
...
AFAIK, the only way to do this is with <canvas/>
...
DEMO V2 : http://jsfiddle.net/xLF38/818/
注意,这只适用于相同的域和支持HTML5画布的浏览器:
Note, this will only work with images on the same domain and in browsers that support HTML5 canvas:
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;
}
对于IE,请查看 excanvas 。
这篇关于通过Javascript获取图像的平均颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文