angular2-img-cropper icon indicating copy to clipboard operation
angular2-img-cropper copied to clipboard

webcam crop image

Open ietuday opened this issue 8 years ago • 1 comments
trafficstars

I am trying to crop image captured by my webcam but cant access cropper on my Image. Please help .... Thanks in advance

ietuday avatar Sep 19 '17 13:09 ietuday

Pass your image data(64baseimage) from your webcam to a modal on which you want to do the crop. On the modal.ts:

import { CropperSettings, ImageCropperComponent } from "ngx-img-cropper";

data: any;
cropperSettings: CropperSettings;

@ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent;
constructor() {
this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 140;
this.cropperSettings.height = 140;
this.cropperSettings.croppedWidth = 140;
this.cropperSettings.croppedHeight = 140;
this.cropperSettings.canvasWidth = 480;
this.cropperSettings.canvasHeight = 300;
this.cropperSettings.keepAspect = true;


this.data = {}
if (base64image) {
  this.data = { image: base64image };
};

ngAfterContentInit() {
    if (this.data.image) {
    let image = new Image();
   let that = this;
   image.onload = function () {
    that.imageCropper.setImage(image);
   };
  image.src = this.data.image;
}
}

lolaswift avatar Mar 20 '18 22:03 lolaswift