使用 ngx-image-cropper 在单个图像上的多个裁剪框

Question

I am working with angular for image cropping task. Image is having multiple faces that need to be select on mouse click. How can we add multiple cropper box with npm package for angular 'ngx-image-cropper' or any other solution on this?

Answer 1

I don't think it is a good idea to have multiple crop boxes at the same time. Keep the source image on the screen and try to crop one by one. imageCropped event of ngx-image-cropper provides you the base64 image of the selected area. Example usage:

onImageCropped(event: ImageCroppedEvent) {
    console.log(event.base64);
}

Add a save button to the page and store the selection in an array. Use them whenever you need. You can also show them in a div and delete any of them.