วิธีใช้ ngx-image-cropper กับ ionic angular 18

ก่อนอื่น ติดตั้ง ngx-image-cropper เวอร์ชั่น 6

npm install ngx-image-cropper@6

นำเข้า ImageCropperModule ในไฟล์ app.module.ts หรือ module ที่เกี่ยวข้อง

import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
  imports: [
    // ...
    ImageCropperModule
  ],
})
export class AppModule { }

แก้ไข HTML template ให้รวม image-cropper component

<div class="image-upload-container">
  <img [src]="croppedImage" alt="รูปสินค้า" class="product-image">
  <ion-button color="light" (click)="fileInput.click()">
    <ion-icon slot="start" name="cloud-upload"></ion-icon>
    เพิ่มรูปประจำตัว
  </ion-button>
  <input type="file" #fileInput (change)="fileChangeEvent($event)" style="display: none">
</div>
<ion-modal [isOpen]="isCropperVisible">
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>ครอปรูปภาพ</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="dismissCropper()">ยกเลิก</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <image-cropper
        [imageChangedEvent]="imageChangedEvent"
        [maintainAspectRatio]="true"
        [aspectRatio]="1 / 1"
        [resizeToWidth]="250"
        format="png"
        (imageCropped)="imageCropped($event)"
        (imageLoaded)="imageLoaded()"
        (cropperReady)="cropperReady()"
        (loadImageFailed)="loadImageFailed()"
      ></image-cropper>
      <ion-button expand="block" (click)="cropImage()">ตกลง</ion-button>
    </ion-content>
  </ng-template>
</ion-modal>

แก้ไข component file (เช่น .ts file) เพื่อจัดการกับการครอปและอัพโหลดรูปภาพ

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.scss']
})
export class ImageUploadComponent {
  imageChangedEvent: any = '';
  croppedImage: any = 'assets/no-img.jpeg';
  isCropperVisible: boolean = false;

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
    this.isCropperVisible = true;
  }

  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64;
  }

  imageLoaded() {
    // แสดง loading state ถ้าต้องการ
  }

  cropperReady() {
    // cropper พร้อมใช้งาน
  }

  loadImageFailed() {
    // จัดการกรณีโหลดรูปภาพไม่สำเร็จ
  }

  dismissCropper() {
    this.isCropperVisible = false;
    this.imageChangedEvent = '';
  }

  cropImage() {
    this.isCropperVisible = false;
    // ทำการอัพโหลดรูปภาพที่ถูกครอปแล้ว (ถ้าต้องการ)
    this.uploadImage();
  }

  uploadImage() {
    // ใส่โค้ดสำหรับการอัพโหลดรูปภาพที่ถูกครอปแล้วไปยังเซิร์ฟเวอร์
    console.log('อัพโหลดรูปภาพ:', this.croppedImage);
  }
}

คำอธิบายเพิ่มเติม:

• เราใช้ isCropperVisible เพื่อควบคุมการแสดง/ซ่อน modal
• fileChangeEvent() จะเปิด modal เมื่อผู้ใช้เลือกไฟล์
• dismissCropper() จะปิด modal และรีเซ็ต imageChangedEvent
• cropImage() จะปิด modal และเรียกใช้ uploadImage() (คุณสามารถปรับแต่งตามความต้องการ)
• เพิ่มฟังก์ชัน imageLoaded(), cropperReady(), และ loadImageFailed() เพื่อจัดการกับเหตุการณ์ต่างๆ ของ image-cropper

การใช้ ion-modal นี้จะทำให้ผู้ใช้สามารถครอปรูปภาพในหน้าต่างแยก ซึ่งช่วยให้ประสบการณ์การใช้งานดีขึ้น โดยเฉพาะบนอุปกรณ์มือถือ