เริ่มต้นด่วน

คู่มือนี้จะช่วยให้คุณเริ่มใช้ Sharp ได้อย่างรวดเร็ว เรียนรู้การดำเนินการประมวลผลรูปภาพพื้นฐาน

การใช้งานพื้นฐาน

นำเข้า Sharp

import sharp from 'sharp';

หรือใช้ CommonJS:

const sharp = require('sharp');

อ่านรูปภาพ

Sharp รองรับรูปแบบอินพุตหลายประเภท:

// อ่านจากไฟล์
const image = sharp('input.jpg');

// อ่านจาก Buffer
const image = sharp(buffer);

// อ่านจาก Stream
const image = sharp(stream);

การดำเนินการพื้นฐาน

การปรับขนาด

// ปรับเป็นขนาดที่ระบุ
await sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg');

// รักษาอัตราส่วนกว้างยาว
await sharp('input.jpg')
  .resize(300, null) // ความกว้าง 300 ความสูงอัตโนมัติ
  .toFile('output.jpg');

// ใช้โหมดการปรับให้พอดีที่แตกต่างกัน
await sharp('input.jpg')
  .resize(300, 200, {
    fit: 'cover',    // ตัดให้พอดี
    position: 'center' // ตัดตรงกลาง
  })
  .toFile('output.jpg');

การแปลงรูปแบบ

// แปลงเป็น JPEG
await sharp('input.png')
  .jpeg({ quality: 80 })
  .toFile('output.jpg');

// แปลงเป็น WebP
await sharp('input.jpg')
  .webp({ quality: 80 })
  .toFile('output.webp');

// แปลงเป็น PNG
await sharp('input.jpg')
  .png({ compressionLevel: 9 })
  .toFile('output.png');

การตัด

// ตัดพื้นที่ที่ระบุ
await sharp('input.jpg')
  .extract({ left: 100, top: 100, width: 200, height: 200 })
  .toFile('cropped.jpg');

การหมุน

// หมุน 90 องศา
await sharp('input.jpg')
  .rotate(90)
  .toFile('rotated.jpg');

การดำเนินการขั้นสูง

เอฟเฟกต์ฟิลเตอร์

// เบลอ
await sharp('input.jpg')
  .blur(5)
  .toFile('blurred.jpg');

// ทำให้คมชัด
await sharp('input.jpg')
  .sharpen()
  .toFile('sharpened.jpg');

// ระดับสีเทา
await sharp('input.jpg')
  .grayscale()
  .toFile('grayscale.jpg');

การปรับสี

// ปรับความสว่าง
await sharp('input.jpg')
  .modulate({ brightness: 1.2 })
  .toFile('bright.jpg');

// ปรับความคมชัด
await sharp('input.jpg')
  .modulate({ contrast: 1.5 })
  .toFile('contrast.jpg');

// ปรับความอิ่มตัว
await sharp('input.jpg')
  .modulate({ saturation: 0.8 })
  .toFile('desaturated.jpg');

ตัวเลือกเอาต์พุต

บันทึกเป็นไฟล์

await sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg');

เอาต์พุตไปยัง Buffer

const buffer = await sharp('input.jpg')
  .resize(300, 200)
  .jpeg()
  .toBuffer();

เอาต์พุตไปยัง Stream

sharp('input.jpg')
  .resize(300, 200)
  .jpeg()
  .pipe(fs.createWriteStream('output.jpg'));

การจัดการข้อผิดพลาด

try {
  await sharp('input.jpg')
    .resize(300, 200)
    .toFile('output.jpg');
} catch (error) {
  console.error('การประมวลผลรูปภาพล้มเหลว:', error);
}

การเพิ่มประสิทธิภาพ

การประมวลผลแบบสตรีม

// ใช้สตรีมเมื่อประมวลผลไฟล์ขนาดใหญ่
const pipeline = sharp()
  .resize(300, 200)
  .jpeg({ quality: 80 });

fs.createReadStream('large-input.jpg')
  .pipe(pipeline)
  .pipe(fs.createWriteStream('output.jpg'));

การประมวลผลพร้อมกัน

// ประมวลผลรูปภาพหลายรูปพร้อมกัน
const promises = images.map(image => 
  sharp(image)
    .resize(300, 200)
    .jpeg()
    .toBuffer()
);

const results = await Promise.all(promises);

ตัวอย่างที่สมบูรณ์

import sharp from 'sharp';
import fs from 'fs';

async function processImage() {
  try {
    // สร้างรูปภาพขนาดย่อ
    await sharp('input.jpg')
      .resize(150, 150, { fit: 'cover' })
      .jpeg({ quality: 90 })
      .toFile('thumbnail.jpg');

    // สร้างรูปภาพขนาดกลาง
    await sharp('input.jpg')
      .resize(800, 600, { fit: 'inside' })
      .webp({ quality: 80 })
      .toFile('medium.webp');

    // สร้างรูปภาพขนาดใหญ่
    await sharp('input.jpg')
      .resize(1920, 1080, { fit: 'inside' })
      .jpeg({ quality: 85 })
      .toFile('large.jpg');

    console.log('การประมวลผลรูปภาพเสร็จสิ้น!');
  } catch (error) {
    console.error('การประมวลผลล้มเหลว:', error);
  }
}

processImage();

ขั้นตอนถัดไป

ตอนนี้คุณเข้าใจการใช้งานพื้นฐานของ Sharp แล้ว สามารถ:

• ดู เอกสาร API เพื่อเรียนรู้วิธีการทั้งหมดที่มี
• เรียนรู้ ตัวอย่างขั้นสูง เพื่อเชี่ยวชาญเทคนิคเพิ่มเติม
• ทำความเข้าใจ การเพิ่มประสิทธิภาพ เพื่อเพิ่มประสิทธิภาพการประมวลผล