that.cropper.setImage is not a function.

[josephserrano15]

Hi there!

Thanks for the feature, look awesome. I m having an issue while using it in a modal. I am getting the following error message.

that.cropper.setImage is not a function. (In 'that.cropper.setImage(image)', 'that.cropper.setImage' is undefined)

Thanks !

[cstefanache]

is the cropper initialized at the moment when you want to execute setImage?
can you try and do it on afterViewInit?

[howzy]

maybe is the template reference variables that you don't set (#cropper).
<img-cropper #cropper [image]="data3" [settings]="cropperSettings3" [(cropPosition)]="cropPosition"></img-cropper>

[josephserrano15]

Hi guys,

Thanks for your feedback.

My code is exactly like this plunker, expect that I have it embedded in a modal. I do have #cropper reference and not sure what to put on AfterViewInit...

Plunker:
https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

My code:

fileChangeListener($event) {
        var image:any = 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);
    }

HTML:

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">Upload picture</h4>
    </modal-header>
    <modal-body>
        <div>
            <div class="file-upload">
                <span class="text">Upload</span>
                <input id="custom-input" type="file" (change)="fileChangeListener($event)">
            </div>
            <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
            <br>
            <span class="result rounded" *ngIf="data.image" >
                <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
            </span>
        </div>
    </modal-body>
    <modal-footer>

        <button type="button" class="btn btn-primary" (click)="Upload()">Upload</button>
    </modal-footer>
</modal>

[josephserrano15]

After thinking the code a little more, I am getting the following error.

caused by: self.parentView._ImageProfileUploaderComponent_26_3.context.openEdit is not a function. (In 'self.parentView._ImageProfileUploaderComponent_26_3.context.openEdit('contractor')', 'self.parentView._ImageProfileUploaderComponent_26_3.context.openEdit' is undefined)

OpenEdit is actually my function to open the modal.

import {Component, OnInit, Input, ViewChild, AfterViewInit, Type} from "@angular/core";
import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-cropper';
import {Ng2Bs3ModalModule} from "ng2-bs3-modal/ng2-bs3-modal";
import {Bounds} from "ng2-img-cropper/src/model/bounds";

@Component({
    selector: "image-profile-uploader",
    templateUrl: 'app/commons/image-profile-uploader/image-profile-uploader.component.html',
    directives: [ImageCropperComponent]
})
export class ImageProfileUploaderComponent extends Type{
    data: any;
    cropperSettings: CropperSettings;
    @ViewChild('modal') modal;
    @ViewChild('cropper', undefined) cropper:ImageCropperComponent;


    constructor() {
        super();
        this.cropperSettings = new CropperSettings();
        this.cropperSettings.width = 100;
        this.cropperSettings.height = 100;
        this.cropperSettings.croppedWidth =100;
        this.cropperSettings.croppedHeight = 100;
        this.cropperSettings.canvasWidth = 400;
        this.cropperSettings.canvasHeight = 300;

        this.data = {};

    }

    openEdit(type:string)
    {
        var that = this;
        that.modal.open();
    }
    Upload()
    {

    }

    cropped(bounds:Bounds) {
        //console.log(bounds);
    }
    fileChangeListener($event) {
        var image:any = 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);
    }
}

[cstefanache]

Is it possible to have either a plnkr or an error dump with the latest version of the cropper?

thanks

[james-criscuolo]

This seems to be an angular issue: angular/angular#5415

While the issue does provide a work-around, it doesn't seem to work for some reason. Is there any way the image can be passed via input? That would likely just cut around this issue without any further trouble.

[ghost]

Hi there,
I got the same error but it was my fault.
I forgot to add ImageCropperComponent into my module declarations.
Now it works fine
David

[ashokdhasan]

Hi there,

It may be useful for someone else, #cropper will not be defined by default since it is loaded inside ng-template (Modal).
It can be resolved by passing #cropper variable from view.

upload

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

This worked for me.

Refer: #166

[Sathishchary]

I used this code web-dave/ngx-img-cropper#51. it may useful to others.