有谁知道是否有一个脚本可以使用客户端脚本来检测图像(包括 HTML)中的暗度/亮度?
我基本上希望能够检测背景中使用的图像的亮度(暗/亮),并让 CSS/HTML/jQuery/JS 根据暗或亮(真或假)的变量来调整页面。
我知道有可用的服务器端脚本,但不能将其用于这个特定的开发项目。
此函数会将每种颜色转换为灰度并返回所有像素的平均值,因此最终值将在 0(最暗)和 255(最亮)之间
function getImageLightness(imageSrc,callback) {
var img = document.createElement("img");
img.src = imageSrc;
img.style.display = "none";
document.body.appendChild(img);
var colorSum = 0;
img.onload = function() {
// create canvas
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this,0,0);
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
var data = imageData.data;
var r,g,b,avg;
for(var x = 0, len = data.length; x < len; x+=4) {
r = data[x];
g = data[x+1];
b = data[x+2];
avg = Math.floor((r+g+b)/3);
colorSum += avg;
}
var brightness = Math.floor(colorSum / (this.width*this.height));
callback(brightness);
}
}
Usage:
getImageLightness("image.jpg",function(brightness){
console.log(brightness);
});
JSFiddle:
http://jsfiddle.net/s7Wx2/ http://jsfiddle.net/s7Wx2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)