SetImage Undefined

[limpep]

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);
  }

[markovicboban]

Same issue here... my component is placed in modal...

[gioymartin]

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.

[ramk18]

Check if you have added 'ImageCropperComponent' in your ngModule declarations.

[anik657]

How did you guys resolve this?

For me it works only if I do not set this.cropperSettings.noFileInput = true; But then I cant style the Input field which is not very desirable

[gioymartin]

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

this.cropper.settings = this.cropperSettings;

[Xepe]

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.

[limpep]

I ended up using the base64 provided to me by my backend system.

[defra91]

Same problem here, trying to upload an image from a component and passing it to a modal (bsx) and then add it to the image cropper.

[analuisamartins]

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);
}

[odaikurd]

@analuisamartins thank you!

[ghost]

@analuisamartins working for me, thank you!

[scottbullard]

I had the same issue when using this.cropperSettings.noFileInput = true;. A simple omission from the example was the issue for me: #cropper selector in the view. It's right there in the Customizing Image cropper example. Added that and it works as expected.

[sophiecmusical]

In my case, it was just an error importing Image, I was sending a wrong image model.

[ChirantanPatel]

@analuisamartins thank you !!!! it's working very very fine...............................

[ghost]

it happened to me when I removed the this.data = {}; of the constructor, just add it again.