search

cstefanache / angular2-img-cropper

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

Data format of [image]? #80

Closed kolkov closed 7 years ago

kolkov commented 7 years ago

Hi! I try to put image from image uploader. What data I must put to data1? HTMLImageElement or another type?

<img-cropper [image]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)">

Or has another way to put image into the cropper?

cstefanache commented 7 years ago

check this plunker - might help you better: https://embed.plnkr.co/VFwGvAO6MhV06IDTLk5W/

kolkov commented 7 years ago

Thanks! I try this in my code, but I see that cropper is undefined ( image

cstefanache commented 7 years ago

Is this plnkr output? For me it works. But you can browse here: https://github.com/cstefanache/angular2-img-cropper/tree/master/runtime we also have a demo app

kolkov commented 7 years ago

I see that in order to do this I need get access to cropper component : @ViewChild('cropper', undefined) public cropper: ImageCropperComponent; this.cropper.setImage(image); but I can't and I do not understand why...

kolkov commented 7 years ago

I find my mistake) My problem is from addition element around the cropper component. 

<p>
<img-cropper [image]="data1" [settings]="cropperSettings1" (onCrop)="cropped($event)"></img-cropper>
     <span class="result"  >
        <img [src]="data1.image" [width]="cropperSettings1.croppedWidth" [height]="cropperSettings1.croppedHeight">
    </span>
</p>

when I removed tag <p> my cropper object appeared.