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:

functionInfoImage(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 = newImage_Processing_Color(canvas);
        var img = newImage();
        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:

functionInfoImage(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 = newImage_Processing_Color(canvas);
        var img = newImage();

        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:

functionInfoImage(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 = newImage_Processing_Color(canvas);
        var img = newImage();

        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:

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

Solution 3:

functionInfoImage(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 = newImage_Processing_Color(canvas);
        var img = newImage();
        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.