JavaScript Saving This. Variable Inside Of Image.onLoad

function InfoImage(path,title){ this.path = path; this.title = title; this.color = undefined; this.maxPixels = undefined; this.init = function(){ var c

Solution 1:

If I'm understanding you right, the usual answer is to use a variable to refer to this, which init then closes over:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        var infoimg = this;                                         // <===

        img.onload = function () {
            img_Color.init(img);
            infoimg.color = img_Color.getDominantColor();           // <===
            infoimg.maxPixels = img_Color.getDominantColorPixels(); // <===
        };
        img.src = path;
    };
}

You can also use Function#bind:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = function () {
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        }.bind(this);                                             // <===
        img.src = path;
    };
}

With ES6, the next version of JavaScript, you'll be able to use an arrow function, because unlike normal functions, arrow functions inherit their this value from the context in which they're defined:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = () => {                              // <===
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };
}

Solution 2:

You need the this and that pattern:

function InfoImage(path, title) {
    var _this = this;
    this.init = function(){
        var img = new Image();
        img.onload = function () {
            _this.color = img_Color.getDominantColor();
        };
    };
};

Solution 3:

function InfoImage(path,title){
    var self = this;

    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        img.onload = function () {
            img_Color.init(img);
            self.color = img_Color.getDominantColor(); //this doesnt work
            self.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };

    this.init();
}

It's that easy. this is a keyword and depends on the function's binded calling context, but it can be stored to a variable just like anything else in JavaScript.