One of the new features of 'HTML5' is the Canvas API, which allows you to draw bitmap graphics on to the web page.
Canvas has a lesser-known interface, called ImageData that lets us get information about an image that's been loaded into the canvas.
getData= function (imgEl) {
var _this = imgDetect,
ctx = _this.CvsCtx(imgEl), //declare a context of the canvas and then grab it
imageData = ctx.getImageData(0,0,imgEl.width,imgEl.height), //get the data about the image in the canvas
data = imageData.data,
colorSum = 0,
imgData = {},
r, g, b, avg, brightness; // other variables for later fun and profit
}
First a pixel, then the world
getData: function (imgEl) {
var _this = imgDetect,
ctx = _this.CvsCtx(imgEl),
imageData = ctx.getImageData(0,0,imgEl.width,imgEl.height),
data = imageData.data,
colorSum = 0,
imgData = {},
r, g, b, avg, brightness;
//Loop through the entire array of pixels
// every fourth element in the array starts a new pixel
for(var x = 0, len = data.length; x < len; x+=4) {
r = data[x]; // red value
g = data[x+1]; // green value
b = data[x+2]; //blue value
avg = Math.floor((r+g+b)/3);
colorSum += avg; // let's track the average f=of the colors
}
imgData.r = r;
imgData.g= g;
imgData.b = b;
imgData.avg = avg;
//simple math to calculate brightness
imgData.brightness = Math.floor(colorSum / (imgEl.width*imgEl.height));
return imgData;
}
//Declare the img detection variable
var imgDetect;
imgDetect = {
init: function (selector) {
var _this = this,
els = document.querySelectorAll(selector);
//loop through every element
[].forEach.call(els, function (el) {
if (el.complete) {
_this.setAttributes(el);
}
});
},
helpers: {
getRelativeBrightness: function (brightness) {
return brightness > 125 ? 'imgDetect--lighter' : 'imgDetect--darker';
},
getRelativeColor:function (data) {
var highClr = Math.max(data.r, data.g, data.b),
color = '';
console.log(data);
switch (highClr) {
case data.r:
color = 'imgDetect--redder';
break;
case data.g:
color = 'imgDetect--greener';
break;
case data.b:
color = 'imgDetect--bluer';
default:
break;
}
return color;
}
},
CvsCtx: function (imgEl) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = imgEl.width;
canvas.height = imgEl.height;
ctx.drawImage(imgEl,0,0);
return ctx;
},
getData: function (imgEl) {
var _this = imgDetect,
ctx = _this.CvsCtx(imgEl),
imageData = ctx.getImageData(0,0,imgEl.width,imgEl.height),
data = imageData.data,
colorSum = 0,
imgData = {},
r, g, b, avg, brightness;
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;
}
imgData.r = r;
imgData.g= g;
imgData.b = b;
imgData.avg = avg;
imgData.brightness = Math.floor(colorSum / (imgEl.width*imgEl.height));
return imgData;
},
setClass: function (el, className) {
el.classList.add(className);
},
setAttributes: function (imgEl) {
var _this = imgDetect,
data = _this.getData(imgEl);
switch (imgEl.getAttribute('data-imgDetect')) {
case 'parentClass':
_this.setClass(imgEl.parentNode, 'brightness--' + data.brightness);
_this.setClass(imgEl.parentNode, _this.helpers.getRelativeBrightness(data.brightness));
_this.setClass(imgEl.parentNode, _this.helpers.getRelativeColor(data));
break;
case 'selfClass':
_this.setClass(imgEl, 'brightness--' + data.brightness);
_this.setClass(imgEl, _this.helpers.getRelativeBrightness(data.brightness));
_this.setClass(imgEl, _this.helpers.getRelativeColor(data));
default:
break;
}
},
};
imgDetect.init('[data-imgDetect]');
