object - JavaScript Saving this. variable inside of image.onLoad -


this question has answer here:

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 doesnt work             this.maxpixels = img_color.getdominantcolorpixels();         };         img.src = path;     };       this.init(); } 

with example, how can save variables infoimage variable? know using this there affect image , not infoimage...

if i'm understanding right, usual answer use variable refer this, init 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 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, next version of javascript, you'll able use arrow function, because unlike normal functions, arrow functions inherit this value context in 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;     }; } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -