cstefanache / angular2-img-cropper

Angular 2 Image Cropper
MIT License
364 stars 135 forks source link

Where can I find Image class? #234

Closed defra91 closed 7 years ago

defra91 commented 7 years ago

I noticed that in the example a class named Image is used:

public readUrl(event: any) {
    if (event.target.files && event.target.files[0]) {
      let image: Image = new Image();
      this.logo = event.target.files[0];
      let reader = new FileReader();
      reader.onload = (event: any) => {
        this.imageUrl = event.target.result;
      };
      reader.onloadend = (loadEvent: any) => {
        image.src = loadEvent.target.result;
        this.cropper.setImage(image);
      }
      reader.readAsDataURL(event.target.files[0]);
    }
  }

It works perfectly but my linter is complaining about Image class which is not declared or defined anywhere. Any suggestion?

defra91 commented 7 years ago

Well I figured it out by myself. Image is a standard javascript object:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

defra91 commented 7 years ago

Furthermore I was having issues compiling in production with webpack. Typescript could not find Image class and so webpack compilation failed. I fixed removing completely the Image reference and replaced with another solution, like in this post: https://stackoverflow.com/questions/25203906/typescript-new-image-from-global-scope

public readUrl(event: any) {
  if (event.target.files && event.target.files[0]) {
    let image = document.createElement('img');
    let file = event.target.files[0];
    let reader: FileReader = new FileReader();
    reader.onloadend = (loadEvent: any) => {
      image.src = loadEvent.target.result;
      this.image = image;
      this.openImageCropModal();
    }
    reader.readAsDataURL(file);
  }
}