JavaScript – 影象暗/光檢測客戶端指令碼
摘要：
有沒有人知道是否有指令碼可以使用客戶端指令碼來檢測影象中的黑暗/亮度(包括html)？
我基本上想要能夠檢測到背景中使用的影象型別(暗/亮),並且CSS / HTML / Jquery / JS會根據一個變暗(light of true)來適應頁面.
我知道有伺服器端指令...
有沒有人知道是否有指令碼可以使用客戶端指令碼來檢測影象中的黑暗/亮度(包括html)？
我基本上想要能夠檢測到背景中使用的影象型別(暗/亮),並且CSS / HTML / Jquery / JS會根據一個變暗(light of true)來適應頁面.
我知道有伺服器端指令碼可用,但不能用於這個特定的開發.
提前致謝.
該功能將每個顏色轉換為灰度級並返回所有畫素的平均值,因此最終值將介於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);
}
}
用法：
getImageLightness("image.jpg",function(brightness){
console.log(brightness);
});
的jsfiddle：
ofollow,noindex" target="_blank">http://jsfiddle.net/s7Wx2/
http://stackoverflow.com/questions/13762864/image-dark-light-detection-client-sided-script