image - 从 Ionic 5 中的 ion-slide 保存的裁剪图像

Question

我的 Ionic 5 应用程序需要以 1:1 的比例保存上传的照片，目前，我发现裁剪照片的最佳界面是 Instagram 的做法。我已经div使用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;
}

到此为止，看照片还是不错的。现在我必须保存照片，包括ion-slides区域内可见的背景。有像html2canvas这样的解决方案可以做到这一点，但我想了解是否有任何挑战

• 照片质量会变差
• 基于手机屏幕分辨率的图像质量

请让我知道是否有好的解决方案。