search

cstefanache / angular2-img-cropper

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

cropper.setImage with bounds doesn't crop #137

Open mattboll opened 7 years ago

mattboll commented 7 years ago

Hi, thanks for the lib, it's awesome.

When we setImage(image, bounds); The cropped image ("imageData.image") is not set using the bounds given in parameters, if we move the mouse over the canvas, then the image is updated, it would be great to have the crop image from the initialization.

akliuiko commented 7 years ago

Can you please show your code, when you init crop image with concrete bounds?

mattboll commented 7 years ago

I tried to give you all the code needed and only it, please tell me if i miss something. The problem here is the img in html.

in ts : … @ViewChild('cropper', undefined) cropper:ImageCropperComponent; … ngOnInit() { let image: any = new Image(); image.src = data.originalPic; if (bounds) { this.cropper.setImage(image, new Bounds(bounds.left, bounds.top, (bounds.right - bounds.left), (bounds.bottom - bounds.top))); … in html : <input name="avatar" accept="image/" (change)="changeListener($event)" type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp"/> <img-cropper #cropper [image]="imageData" [settings]="cropperSettings" (onCrop)="cropped($event)"> <span class="result" ngIf="imageData.image"> <img [src]="imageData.image" [width]="cropperSettings.width" [height]="cropperSettings.height">

akliuiko commented 7 years ago

It's quite strange, can you either clear your browser cache or reinstall the lib? If this won't help, move the source code from onOnInit to ngAfterViewInit method.

mattboll commented 7 years ago

I tried to move to ngAfterViewInit without success… But I don't use cropped image anymore to avoid some bugs, so if you can't reproduce, you may close this bug