cstefanache / angular2-img-cropper

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

Can't use two croppers inside one component #243

Open Meditate opened 6 years ago

Meditate commented 6 years ago

Hello guys, first of all thank you for your img-cropper library, I found it very useful.

However I found one problem, which of course can be on my side, but hopefully I'll get a feedback from you.

inside angular-form, I have two input fields (which is by default filled with the object from input), and for both of this image fields I want to use cropper. However the problem is - I have only one working cropper, and the second one renders nothing

code:

<input id="mobile-picture-input" type="file" (change)="cropper.fileChangeListener($event)">
<img-cropper [class.hidden]="!data.image" #cropper [image]="data" [settings]="cropperSettings" (onCrop)="mobileBannerChanged()"></img-cropper>

In second:

<input id="picture-input" type="file" (change)="cropper.fileChangeListener($event)" accept="image/jpeg, image/png">
<img-cropper [class.hidden]="!data.image" #cropper [image]="data" [settings]="cropperSettings" (onCrop)="bannerChanged()"></img-cropper>

Is there a way to connect the [image] prop not with data (as you show in you main manual) but with custom field? and how do the content of input coming into the data attribute?

Could you please tell me, what can cause this kind of problem?

Thank you for your attention, once again thank you for your library