-1

I'm using ngx-image-cropper

import { ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
user={ ..
};
image: any = '';
croppedImage: any = '';
transform: ImageTransform = {};
scale = 1;
showCropper = false;
profilePicUpload(e): void {
    this.imageChangedEvent = e;
    this.image  = e.target.files[0];
  }

  imageCropped(event: ImageCroppedEvent) {
    this.user.photo = event.base64;
    this.croppedImage = event.base64.substring(22);
  }
  imageLoaded() {
    this.showCropper = true;
  }

async addImg() {

 if(this.image){ 
      const path  = await this.UploadService.uploadFile(this.image);
      await new Promise(f => setTimeout(f, 2000));
      this.user.photo = '';
      this.user.photo += path;
     } 
}

using this code to upload image but issue is the cropped image is not saved but the original image is saved.

Any solution Thanks

user3653474
  • 3,393
  • 6
  • 49
  • 135
  • I have used npm package version->"ngx-image-cropper": "^3.2.0" it is working fine. you have to import ImageCropperModule in imports array. Here is the method in component.ts file. imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; } – Nirali Gajjar Jul 28 '22 at 06:54

2 Answers2

0

Maybe you should upload the cropped image this.croppedImage?

this.UploadService.uploadFile(this.croppedImage);
Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Thanks if i use `this.croppedImage` getting this error `TypeError: Cannot read properties of undefined (reading 'split')` in this line of service : `var name = file.name.split('.')[0] + '_' + currentdate.getDate()` – user3653474 Jul 28 '22 at 06:59
  • Can i convert base64 to image and then upload the image – user3653474 Jul 28 '22 at 07:12
0
this.croppedImageUrl = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);

try this

source : https://github.com/Mawi137/ngx-image-cropper/releases/tag/7.0.0

Mohamed Ashique Ar-Rasool
  • 53
  • 1
  • 13