angular2-img-cropper: SetImage Undefined

Hi,

I am trying to load the image that I get from the server in my loadImage method but I keep getting the following error Cannot read property ‘setImage’ of undefined. Not sure why, any help would be much appreciated.

Here is my code below

  data: any;

  cropperSettings: CropperSettings;

  croppedWidth:number;
  croppedHeight:number;

  @ViewChild('cropper', undefined)
  cropper:ImageCropperComponent;

  constructor() {
    this.data = {};
  }

  ngOnInit() {

    this.cropperSettings = new CropperSettings();
    this.cropperSettings.fileType = "image/jpeg";

    this.cropperSettings.width = 400;
    this.cropperSettings.height = 400;

    this.cropperSettings.croppedWidth = 400;
    this.cropperSettings.croppedHeight = 400;

    this.cropperSettings.canvasWidth = 150;
    this.cropperSettings.canvasHeight = 150;

    this.cropperSettings.rounded = false;
    this.cropperSettings.keepAspect = true;
    // this.cropperSettings.dynamicSizing = true;

    this.cropperSettings.noFileInput = true;
    this.cropperSettings.cropperDrawSettings.strokeColor = 'rgba(0,0,0,0.5)';
    this.cropperSettings.cropperDrawSettings.strokeWidth = 1;
  }

  cropped(bounds:Bounds) {
    this.croppedHeight = bounds.bottom-bounds.top;
    this.croppedWidth = bounds.right-bounds.left;
  }


  private loadImage(){
    let imgObj = new Image();
    imgObj.src = 'data:image/jpeg;base64,' + this.user.avatar;
    this.cropper.setImage(imgObj);
  }

  fileChangeListener($event) {
    let image:any = new Image();;

    let file = $event.target.files[0];
    let myReader:FileReader = new FileReader();
    let that = this;

    myReader.onloadend = function (loadEvent:any) {
      that.cropper.reset();
      image.src = loadEvent.target.result;
      that.cropper.setImage(image);
    };

    myReader.readAsDataURL(file);
  }

About this issue

Original URL
State: open
Created 7 years ago
Comments: 15

Most upvoted comments

Just crossed this frustrating issue and spent ~4 frustrating hours trying to find a solution. The problem is that cropper is inside the modal and is never initiated with viewchild:

  @ViewChild('cropper', undefined)
  cropper:ImageCropperComponent;

This describes the problem https://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined , tried all the suggestions but nothing works for this particular case.

After a coffe this came to my mind and works for me:

<div class="file-upload">
    <span class="text">upload</span>
    <input id="custom-input" type="file" (change)="fileChangeListener($event, cropper)">
</div>

fileChangeListener($event, cropperComp: ImageCropperComponent) {

  this.cropper = cropperComp;

  let image = new Image();
  var file:File = $event.target.files[0];
  var myReader:FileReader = new FileReader();
  var that = this;

  myReader.onloadend = function (loadEvent: any) {
      image.src = loadEvent.target.result;
      that.cropper.setImage(image);
  };
  myReader.readAsDataURL(file);
}

analuisamartins on Oct 18, 2017

Hello,

I am working in something similar, working for me with the following code:

let image = new Image();  
image.src = this.model[this.key];
image.crossOrigin = 'Anonymous'; 

image.onload = () => { 
   this.cropper.setImage(image); 
};

you need to be sure that the image is loaded, before to set it.

Xepe on Jun 5, 2017

In my case it worked adding the settings to the cropper object at the end of ngOnInit()

this.cropper.settings = this.cropperSettings;

gioymartin on Jun 2, 2017

Same issue here. I’m using this component inside ng2-bootstrap-modal. The image data is obtained from a file upload and then I try to init the cropper inside the modal without success. I’ve tried to put setImage function inside ngAfterViewInit() or ngOnInit() but the result is the same.

gioymartin on Apr 17, 2017