1cco
7/18/2017 - 10:12 AM

Get Average Color of Image.

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));