Saved cropped image from ion-slide in Ionic 5

Question

My Ionic 5 application requires saving uploaded photos in 1:1 ratio and currently, the best interface to crop a photo I find is the way Instagram does it. I have implemented a zoom and pan photo feature in a fixed size div by using ion-slide.

<ion-slides [options]="slideOpts" zoom class="slider">
  <ion-slide>
    <div class="swiper-zoom-container">
      <img [src]=myImg />
    </div>
  </ion-slide>
</ion-slides>

  slideOpts = {
    initialSlide: 1,
    speed: 400,
    zoom:{
      maxRatio: 2
    }
  };

.slider{
    width: 100vw;
    height: 100vw;
    background: grey;
}

Up to this point, it is good for viewing the photo. Now I have to save the photo including background visible inside ion-slides area. There are solutions like html2canvas do this but I want to understand if there are any challenges like

• Photo quality will deteriorate
• Image quality based on the mobile screen resolution

Please let m know if there is a good solution.