Image.js

var brightnessProperty = {
    get: function () {
        var canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = 1;
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0, 1, 1);
        var data = context.getImageData(0, 0, 1, 1).data;
        return Math.floor((data[0] + data[1] + data[2]) / 3)
    },
    set: function (val) {
        if ((val < 1) && (val > 0)) {
            val = Math.floor(val * 256);
        } else {
            val = Math.min(Math.round(val), 255);
        }
        var delta_brightness = -(this.brightness - val);
        var overlay_canvas = document.createElement('canvas');
        overlay_canvas.width = 1;
        overlay_canvas.height = 1;
        var overlay_context = overlay_canvas.getContext('2d');
        var overlay_data = overlay_context.getImageData(0, 0, 1, 1);
        if (delta_brightness > 0) {
            overlay_data.data[0] = overlay_data.data[1] = overlay_data.data[2] = 0;
        } else {
            overlay_data.data[0] = overlay_data.data[1] = overlay_data.data[2] = 255;
        }
        overlay_data.data[4] = Math.abs(delta_brightness);
        overlay_context.putImageData(overlay_data, 0, 0);
        var overlay_img = new Image();
        overlay_img.onload = (function(){
            console.log(overlay_img.src);
            var canvas = document.createElement('canvas');
            canvas.width = this.width;
            canvas.height = this.height;
            var context = canvas.getContext('2d');
            context.drawImage(this, 0, 0, this.width, this.height);
            context.drawImage(overlay_img, 0, 0, this.width, this.height);
            console.log(canvas.toDataURL());
            this.src = canvas.toDataURL();
        }).bind(this);
        overlay_img.src = overlay_canvas.toDataURL()
    }
};
Object.defineProperty(Image.prototype, 'brightness', brightnessProperty);
Object.defineProperty(HTMLImageElement.prototype, 'brightness', brightnessProperty);