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
Post a Comment