Enlighter.js Example

การติดตั้ง Cropper.js และการตั้งค่าเบื้องต้น

1. เริ่มต้นด้วยการติดตั้ง Cropper.js:

ก่อนอื่นเราจะดาวน์โหลดไลบรารี Cropper.js จาก Cropper.js GitHub Repository หรือติดตั้งผ่าน CDN หรือ npm:

npm install cropperjs

หากใช้ CDN ให้เพิ่มลิงก์ดังต่อไปนี้ใน <head> ของไฟล์ HTML:

<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet">
<script src="https://unpkg.com/cropperjs"></script>

2. สร้าง UI สำหรับอัปโหลดรูปภาพ:

สร้างอินพุตสำหรับอัปโหลดรูปภาพ (input file) และสร้างองค์ประกอบ HTML เพื่อแสดงตัวอย่างรูปภาพก่อนครอบตัด:

<input type="file" id="imageInput" accept="image/*">
<div>
  <img id="imagePreview" style="max-width: 100%; display: none;">
</div>
<button id="cropButton" style="display: none;">Crop Image</button>
<canvas id="croppedCanvas"></canvas>

3. ตั้งค่าการอัปโหลดและครอบตัดรูปภาพด้วย JavaScript:

จากนั้น เขียนโค้ด JavaScript เพื่อตั้งค่าการครอบตัด โดยจะใช้ Cropper.js เพื่อจัดการกับรูปภาพที่อัปโหลด:

// ดึงองค์ประกอบต่างๆ ใน HTML

const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
const cropButton = document.getElementById('cropButton');
const croppedCanvas = document.getElementById('croppedCanvas');

let cropper; // ใช้เก็บอินสแตนซ์ของ Cropper

// ฟังก์ชันสำหรับการแสดงรูปภาพที่ถูกอัปโหลด
imageInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    imagePreview.src = e.target.result;
    imagePreview.style.display = 'block';

    // สร้าง Cropper บนรูปภาพที่แสดง
    cropper = new Cropper(imagePreview, {
      aspectRatio: 1, // กำหนดสัดส่วนที่ต้องการ
      viewMode: 1,
      scalable: true,
      zoomable: true,
      minCropBoxWidth: 100,
      minCropBoxHeight: 100,
    });

    cropButton.style.display = 'block';
  };

  reader.readAsDataURL(file);
});

// ฟังก์ชันสำหรับการครอบตัดรูปภาพ
cropButton.addEventListener('click', () => {
  // นำข้อมูลจากการครอบตัดไปใส่ใน Canvas
  const croppedDataURL = cropper.getCroppedCanvas().toDataURL();
  const context = croppedCanvas.getContext('2d');
  
  const croppedImage = new Image();
  croppedImage.src = croppedDataURL;
  croppedImage.onload = () => {
    croppedCanvas.width = croppedImage.width;
    croppedCanvas.height = croppedImage.height;
    context.drawImage(croppedImage, 0, 0);
  };
});

4. การปรับแต่งเพิ่มเติม:

คุณสามารถปรับแต่ง Cropper.js ได้อีกมากมาย เช่น การกำหนดสัดส่วนรูปภาพ (aspectRatio), การเปิด/ปิดการย่อ-ขยาย (zoomable), การเลื่อน (movable), และการเปลี่ยนขนาดครอบ (scalable) เพื่อตอบสนองการใช้งานที่หลากหลาย ตัวอย่างเช่น:

cropper = new Cropper(imagePreview, {
  aspectRatio: 16 / 9, // กำหนดสัดส่วน 16:9
  viewMode: 2, // ปรับการแสดงผล
  movable: true, // เปิดการเลื่อนตำแหน่ง
  cropBoxResizable: true, // เปิดการเปลี่ยนขนาดของ Crop Box
});

การส่งรูปภาพที่ครอบตัดแล้วไปยังเซิร์ฟเวอร์

หากต้องการอัปโหลดรูปภาพที่ครอบตัดไปยังเซิร์ฟเวอร์ คุณสามารถส่งข้อมูลภาพจาก Canvas โดยใช้ FormData ในการจัดการและส่งผ่าน API เช่น:

cropButton.addEventListener('click', () => {
  // ส่งข้อมูลไปยังเซิร์ฟเวอร์
  const formData = new FormData();
  cropper.getCroppedCanvas().toBlob((blob) => {
    formData.append('croppedImage', blob);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
    .then((response) => response.json())
    .then((data) => {
      console.log('Upload Success:', data);
    })
    .catch((error) => {
      console.error('Upload Error:', error);
    });
  });
});

โค้ดด้านบนจะทำการส่งรูปภาพที่ครอบตัดแล้วในรูปแบบ Blob ผ่าน FormData ไปยังเซิร์ฟเวอร์ที่ระบุที่ endpoint /upload ซึ่งคุณสามารถปรับแต่งเพิ่มเติมได้ตามโครงสร้างและการใช้งาน API ของเซิร์ฟเวอร์ของคุณเอง

สรุป

การอัปโหลดรูปภาพและครอบตัดภาพสามารถทำได้ง่ายๆ โดยใช้ไลบรารี Cropper.js ซึ่งช่วยให้คุณสามารถจัดการกับรูปภาพได้อย่างสะดวก ทั้งการกำหนดสัดส่วน, การย่อ-ขยาย, และการปรับขนาดของกล่องครอบตัด อีกทั้งยังสามารถนำภาพที่ครอบตัดแล้วไปแสดงบน Canvas หรือนำส่งไปยังเซิร์ฟเวอร์ได้ตามต้องการ

การนำเทคนิคนี้ไปปรับใช้จะช่วยเพิ่มความยืดหยุ่นและความสามารถในการจัดการรูปภาพในโปรเจ็กต์ต่างๆ ของคุณได้มากขึ้น