angular access variable inside a function

Question

I'm new to angular. I couldn't figure how to access a variable inside a function(). this is my code

  mergeImages() {
    var imgurl;
    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


    let img1 = new Image();
    let img2 = new Image();

    img1.onload = function() {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };
    img2.onload = function() {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

    };
    img1.src = '../assets/moon.jpg';


     }

now I need to access "imgurl" from another method

 printvalue(){
   need to access imgurl
}

edit 1 - problem is angular cannot find var a on printvalue() it's only working inside function something()

local vs global variable ? i think it not angular/typescript issue. — Prerak K
– Prerak K, Commented Mar 16, 2018 at 6:02

Hrishikesh Kale · Accepted Answer · 2018-03-16 06:39:16Z

3

here you want to make a scope variable and access throughout the component, earlier in angularJS, there was $scope variable where you could access that variable throughout, in the latest angular version you need to use this to access throughout.

so you need to try

     imgurl : string;
mergeImages() {

    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


    let img1 = new Image();
    let img2 = new Image();

    img1.onload = () => {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };
    img2.onload = () => {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       this.imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

    };
    this.img1.src = '../assets/moon.jpg';


     }

edited Mar 16, 2018 at 6:39

answered Mar 16, 2018 at 5:48

Hrishikesh Kale

6,6484 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stephen Reynolds Over a year ago

problem is angular cannot find var a on printvalue() it's only working inside function something()

Hrishikesh Kale Over a year ago

while assigning the value to a use this.a = 20 @StephenReynolds

Hrishikesh Kale Over a year ago

@StephenReynolds also you are declaring a variable in dosomething function you need to declare that globally. check my updated answer

Stephen Reynolds Over a year ago

Actually already tried all these methods but no success I'll delete this question and repost it with original code. anyway thanx for taking your valuable time to answer my question :)

Stephen Reynolds Over a year ago

ok stackoverflow don't allow me to delete this. so I'll edit this question

|

Anas · Accepted Answer · 2018-03-16 06:17:47Z

1

Convert your code like this

let imgurl;
mergeImages() {

    var canvas: HTMLCanvasElement = this.canvas.nativeElement;
    var context = canvas.getContext('2d');


    let img1 = new Image();
    let img2 = new Image();

    img1.onload = () => {
      canvas.width = img1.width;
      canvas.height = img1.height;
      context.globalAlpha = 1.0;
      img2.src = '../assets/sun.jpg';
    };
    img2.onload = () => {
      context.globalAlpha = 1;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 0.5; //Remove if pngs have alpha
      context.drawImage(img2, 0, 0);

       this.imgurl = canvas.toDataURL("image/jpg");
      //console.log(imgurl)

    };
    this.img1.src = '../assets/moon.jpg';


     }

edited Mar 16, 2018 at 6:17

answered Mar 16, 2018 at 5:44

Anas

99113 silver badges29 bronze badges

4 Comments

Stephen Reynolds Over a year ago

problem is angular cannot find var a on printvalue() it's only working inside function something()

Stephen Reynolds Over a year ago

@ anas first of all thanx for taking your valuable time to answer my question. when I tried to declare letimgurl; my ide gives error under "let" saying "a constructor method or accseor or property was expected "

Anas Over a year ago

@StephenReynolds Have you used function keyword ? It is not supposed to use in angular

Stephen Reynolds Over a year ago

yes first I used that but then I changed it as you posted

Collectives™ on Stack Overflow

angular access variable inside a function

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related