Open josephserrano15 opened 7 years ago
is the cropper initialized at the moment when you want to execute setImage? can you try and do it on afterViewInit?
maybe is the template reference variables that you don't set (#cropper).
<img-cropper #cropper [image]="data3" [settings]="cropperSettings3" [(cropPosition)]="cropPosition"></img-cropper>
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>
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);
}
}
Is it possible to have either a plnkr or an error dump with the latest version of the cropper?
thanks
This seems to be an angular issue: https://github.com/angular/angular/issues/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.
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
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.
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: https://github.com/cstefanache/angular2-img-cropper/issues/166
I used this code https://github.com/web-dave/ngx-img-cropper/issues/51. it may useful to others.
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 !