(Angular 5) javascript Image onload in angular

Question

I want to use Image.onload = function () {} in angular

my code

loadImage(path) {
  this.loadedImage = new Image();
  this.loadedImage.crossOrigin = "Anonymous";
  this.loadedImage.src = path;

  this.loadedImage.onload = function () {
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage);     
  }
}

Is there a way to use this event on angular.

Any help would be greatly appreciated.

What do you mean by didn't work? Are you getting any errors? — yurzui
– yurzui, Commented Apr 30, 2018 at 6:44
You are instantiating a custom object (Image), which is crucial for your problem... yet you don't even mention what it is. — Carsten
– Carsten, Commented Apr 30, 2018 at 7:03
it is not executing onload funcation. (No error, does not go inside =>{}) — Devan Madlani
– Devan Madlani, Commented Apr 30, 2018 at 8:30

user184994 · Accepted Answer · 2018-04-30 06:46:30Z

21

Try to make use of the angular built in functionality if you can.

In the loadImage function

this.imageSrc = path;

Create a function to be called on image load

onImageLoad() {
    // Do what you need in here
}

And in the template:

<img [src]="this.imageSrc" (load)="onImageLoad()" />

answered Apr 30, 2018 at 6:46

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

4 Comments

Devan Madlani Over a year ago

i am not using img tag. just created an object and assigned with base64 this.loadedImage.src = path;

intotecho Over a year ago

How would you get the loaded image properties (height, width) inside onImageLoad() ?

SkyReel Over a year ago

(load)="onImageLoad($event)" may get the properties.

Kornel Dylski Over a year ago

"this" keyword in template is an error, should be just [src]="imageSrc"

Kodiak · Accepted Answer · 2020-03-04 16:03:59Z

3

onload is called if a proper image path is given.

If it still doesn't work then check 1) Where are calling the method loadImage ? 2) Is there any issue with the preview helper line

Edit 1:

If you are using function then try the below:

this.loadedImage.onload = function() {
    let that = this;
    that._PreviewHelper.changeModelTexture(that.model, that.loadedImage);     
}

Otherwise, try this: (https://stackblitz.com/edit/angular-rzlmee)

this.loadedImage.onload = () => {
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage);     
  }

edited Mar 4, 2020 at 16:03

Kodiak

5,97819 silver badges35 bronze badges

answered Apr 30, 2018 at 7:17

Arvind Muthuraman

3,1351 gold badge14 silver badges11 bronze badges

3 Comments

Devan Madlani Over a year ago

The code u shared on load will execute this.loadedImage.onload = function () { console.log('hihi') } (hihi is consoled) as = function() is not typescript so we can not access variables or functions in component

Arvind Muthuraman Over a year ago

I have updated my answer for this scenario. Check it. Also, I have updated the stackblitz implementation

Wisarut Bholsithi Over a year ago

Neither example of using let that = this nor the example of using the arrow function for the case of anonymous function to load image variable does not work for me. Better come up with other alternative that work for my case. BTW, I'm using Angular 10 though.

Collectives™ on Stack Overflow

(Angular 5) javascript Image onload in angular

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related