Get Average Color of Image.
class EventDispatcher {
private _eventHandlers = {};
public addEventListener(theEvent, theHandler) {
this._eventHandlers[theEvent] = this._eventHandlers[theEvent] || [];
this._eventHandlers[theEvent].push(theHandler);
}
public removeEventListener(theEvent, theHandler) {
}
public removeAllListeners(theEvent) {
}
public dispatchEvent(theEvent) {
var theHandlers = this._eventHandlers[theEvent];
if(theHandlers) {
for(var i = 0; i < theHandlers.length; i += 1) {
this.dispatch(theEvent, theHandlers[i]);
}
}
}
public dispatch(theEvent, theHandler) {
theHandler(theEvent);
}
}
namespace AvarageColorEvent {
export const IMAGE_LOADED = "imageLoaded";
}
/**
* @description Get avarage color of image.
* usage:
* var avarageColor = new AvarageColor('path/to/image.png');
* avarageColor.addEventListener(AvarageColorEvent.IMAGE_LOADED, function() {
* var rgb = avarageColor.getColor(10, 10);
* var hsl = avarageColor.rgb2hsl(rgb);
*/
class AvarageColor extends EventDispatcher {
public img;
public tmp;
constructor(imageURL) {
super();
this.img = new Image();
this.img.crossOrigin = "Anonymous";
this.img.src = imageURL;
this.img.onload = this.onImageLoad;
}
public getColor(w=0, h=0) {
var data, color, context;
if (w === 0 || h === 0) {
w = this.img.naturalWidth;
h = this.img.naturalHeight;
}
this.tmp = this.createCanvas(w, h);
context = this.tmp.getContext('2d');
context.drawImage(this.img, 0, 0, w, h);
try {
data = context.getImageData(0, 0, w, h);
}
catch(e){
data = { data: [0, 0, 0] };
}
color = this.getAvarage(data.data);
return color;
}
private getAvarage(data) {
var tmp = {
r: 0,
g: 0,
b: 0,
};
var avarage = [];
var n = data.length;
var len = n / 4;
for (var i = 0; i < n; i += 4) {
tmp.r += data[i];
tmp.g += data[i + 1];
tmp.b += data[i + 2];
}
avarage[0] = Math.floor(tmp.r / len);
avarage[1] = Math.floor(tmp.g / len);
avarage[2] = Math.floor(tmp.b / len);
return avarage;
}
private onImageLoad = () => {
this.dispatchEvent(AvarageColorEvent.IMAGE_LOADED);
}
private createCanvas(w=75, h=75) {
var cv = document.createElement('canvas');
cv.width = w;
cv.height = h;
return cv;
}
public rgb2hsl(r, g?, b?) {
var max, min;
var h, s, l;
if (typeof r === "object") {
if (r instanceof Array) {
g = r[1] / 255;
b = r[2] / 255;
r = r[0] / 255;
}
else {
g = r.g / 255;
b = r.b / 255;
r = r.r / 255;
}
}
else {
r /= 255;
g /= 255;
b /= 255;
}
max = Math.max(r, g, b),
min = Math.min(r, g, b);
l = (max + min) / 2;
if (max == min) {
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return { h: h, s: s, l: l };
}
}
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) { if (b.hasOwnProperty(p)) d[p] = b[p]; }
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var EventDispatcher = (function () {
function EventDispatcher() {
this._eventHandlers = {};
}
EventDispatcher.prototype.addEventListener = function (theEvent, theHandler) {
this._eventHandlers[theEvent] = this._eventHandlers[theEvent] || [];
this._eventHandlers[theEvent].push(theHandler);
};
EventDispatcher.prototype.removeEventListener = function (theEvent, theHandler) {
};
EventDispatcher.prototype.removeAllListeners = function (theEvent) {
};
EventDispatcher.prototype.dispatchEvent = function (theEvent) {
var theHandlers = this._eventHandlers[theEvent];
if (theHandlers) {
for (var i = 0; i < theHandlers.length; i += 1) {
this.dispatch(theEvent, theHandlers[i]);
}
}
};
EventDispatcher.prototype.dispatch = function (theEvent, theHandler) {
theHandler(theEvent);
};
return EventDispatcher;
}());
var AvarageColorEvent;
(function (AvarageColorEvent) {
AvarageColorEvent.IMAGE_LOADED = "imageLoaded";
})(AvarageColorEvent || (AvarageColorEvent = {}));
var AvarageColor = (function (_super) {
__extends(AvarageColor, _super);
function AvarageColor(imageURL) {
var _this = _super.call(this) || this;
_this.onImageLoad = function () {
_this.dispatchEvent(AvarageColorEvent.IMAGE_LOADED);
};
_this.img = new Image();
_this.img.crossOrigin = "Anonymous";
_this.img.src = imageURL;
_this.img.onload = _this.onImageLoad;
return _this;
}
AvarageColor.prototype.getColor = function (w, h) {
if (w === void 0) { w = 0; }
if (h === void 0) { h = 0; }
var data, color, context;
if (w === 0 || h === 0) {
w = this.img.naturalWidth;
h = this.img.naturalHeight;
}
this.tmp = this.createCanvas(w, h);
context = this.tmp.getContext('2d');
context.drawImage(this.img, 0, 0, w, h);
try {
data = context.getImageData(0, 0, w, h);
}
catch (e) {
data = { data: [0, 0, 0] };
}
color = this.getAvarage(data.data);
return color;
};
AvarageColor.prototype.getAvarage = function (data) {
var tmp = {
r: 0,
g: 0,
b: 0
};
var avarage = [];
var n = data.length;
var len = n / 4;
for (var i = 0; i < n; i += 4) {
tmp.r += data[i];
tmp.g += data[i + 1];
tmp.b += data[i + 2];
}
avarage[0] = Math.floor(tmp.r / len);
avarage[1] = Math.floor(tmp.g / len);
avarage[2] = Math.floor(tmp.b / len);
return avarage;
};
AvarageColor.prototype.createCanvas = function (w, h) {
if (w === void 0) { w = 75; }
if (h === void 0) { h = 75; }
var cv = document.createElement('canvas');
cv.width = w;
cv.height = h;
return cv;
};
AvarageColor.prototype.rgb2hsl = function (r, g, b) {
var max, min;
var h, s, l;
if (typeof r === "object") {
if (r instanceof Array) {
g = r[1] / 255;
b = r[2] / 255;
r = r[0] / 255;
}
else {
g = r.g / 255;
b = r.b / 255;
r = r.r / 255;
}
}
else {
r /= 255;
g /= 255;
b /= 255;
}
max = Math.max(r, g, b),
min = Math.min(r, g, b);
l = (max + min) / 2;
if (max == min) {
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return { h: h, s: s, l: l };
};
return AvarageColor;
}(EventDispatcher));