快速開始

本指南將幫助您快速上手 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 文檔 了解所有可用方法
• 學習 高級示例 掌握更多技巧
• 了解 性能優化 提升處理效率