Skip to content

圖像處理 API

Sharp 提供了豐富的圖像處理功能,包括調整大小、裁剪、旋轉、濾鏡等操作。

調整大小 (resize)

基本用法

javascript
import sharp from 'sharp';

// 調整到指定尺寸
sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg');

// 只指定寬度,高度自動計算
sharp('input.jpg')
  .resize(300)
  .toFile('output.jpg');

// 只指定高度,寬度自動計算
sharp('input.jpg')
  .resize(null, 200)
  .toFile('output.jpg');

調整選項

javascript
sharp('input.jpg')
  .resize(300, 200, {
    // 調整算法
    kernel: sharp.kernel.lanczos3,
    
    // 位置
    position: 'center',
    
    // 背景色
    background: { r: 255, g: 255, b: 255, alpha: 1 },
    
    // 是否保持寬高比
    fit: 'cover',
    
    // 是否不放大
    withoutEnlargement: true,
    
    // 是否不縮小
    withoutReduction: false
  })
  .toFile('output.jpg');

調整算法

javascript
// 可用的調整算法
sharp.kernel.nearest      // 最近鄰
sharp.kernel.cubic        // 三次插值
sharp.kernel.mitchell     // Mitchell-Netravali
sharp.kernel.lanczos2     // Lanczos 2-lobed
sharp.kernel.lanczos3     // Lanczos 3-lobed (默認)

適應模式

javascript
// cover: 保持寬高比,裁剪超出部分
sharp('input.jpg').resize(300, 200, { fit: 'cover' })

// contain: 保持寬高比,添加背景
sharp('input.jpg').resize(300, 200, { fit: 'contain' })

// fill: 拉伸到指定尺寸
sharp('input.jpg').resize(300, 200, { fit: 'fill' })

// inside: 保持寬高比,不超出原圖尺寸
sharp('input.jpg').resize(300, 200, { fit: 'inside' })

// outside: 保持寬高比,至少達到指定尺寸
sharp('input.jpg').resize(300, 200, { fit: 'outside' })

裁剪 (extract)

javascript
// 裁剪指定區域
sharp('input.jpg')
  .extract({ left: 100, top: 100, width: 300, height: 200 })
  .toFile('output.jpg');

// 裁剪並調整大小
sharp('input.jpg')
  .extract({ left: 100, top: 100, width: 300, height: 200 })
  .resize(150, 100)
  .toFile('output.jpg');

旋轉 (rotate)

javascript
// 旋轉90度
sharp('input.jpg')
  .rotate(90)
  .toFile('output.jpg');

// 旋轉並指定背景色
sharp('input.jpg')
  .rotate(45, { background: { r: 255, g: 255, b: 255, alpha: 1 } })
  .toFile('output.jpg');

翻轉 (flip/flop)

javascript
// 垂直翻轉
sharp('input.jpg')
  .flip()
  .toFile('output.jpg');

// 水平翻轉
sharp('input.jpg')
  .flop()
  .toFile('output.jpg');

模糊 (blur)

javascript
// 高斯模糊
sharp('input.jpg')
  .blur(5)
  .toFile('output.jpg');

// 銳化
sharp('input.jpg')
  .sharpen()
  .toFile('output.jpg');

// 自定義銳化參數
sharp('input.jpg')
  .sharpen({
    sigma: 1,
    flat: 1,
    jagged: 2
  })
  .toFile('output.jpg');

濾鏡 (filters)

灰度

javascript
sharp('input.jpg')
  .grayscale()
  .toFile('output.jpg');

反轉

javascript
sharp('input.jpg')
  .negate()
  .toFile('output.jpg');

伽馬校正

javascript
sharp('input.jpg')
  .gamma(2.2)
  .toFile('output.jpg');

亮度/對比度

javascript
sharp('input.jpg')
  .modulate({
    brightness: 1.2,    // 亮度 (0.1-2.0)
    saturation: 0.8,    // 飽和度 (0-2.0)
    hue: 180            // 色相 (0-360)
  })
  .toFile('output.jpg');

顏色操作

色調分離

javascript
sharp('input.jpg')
  .tint({ r: 255, g: 0, b: 0 })
  .toFile('output.jpg');

顏色矩陣

javascript
sharp('input.jpg')
  .recomb([
    [0.3588, 0.7044, 0.1368],
    [0.2990, 0.5870, 0.1140],
    [0.0000, 0.0000, 1.0000]
  ])
  .toFile('output.jpg');

通道操作

分離通道

javascript
// 獲取紅色通道
sharp('input.jpg')
  .extractChannel('red')
  .toFile('red-channel.jpg');

// 獲取所有通道
const channels = await sharp('input.jpg').separate();

合並通道

javascript
// 從單獨的通道文件合並
sharp('red.jpg')
  .joinChannel(['green.jpg', 'blue.jpg'])
  .toFile('merged.jpg');

組合操作

javascript
// 鏈式操作
sharp('input.jpg')
  .resize(800, 600)
  .rotate(90)
  .blur(2)
  .sharpen()
  .jpeg({ quality: 80 })
  .toFile('output.jpg');

性能優化

流式處理

javascript
const fs = require('fs');

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

批量處理

javascript
const sharp = require('sharp');
const fs = require('fs').promises;

async function processImages() {
  const files = await fs.readdir('./images');
  
  const promises = files
    .filter(file => file.endsWith('.jpg'))
    .map(async file => {
      await sharp(`./images/${file}`)
        .resize(300, 200)
        .jpeg({ quality: 80 })
        .toFile(`./output/${file}`);
    });
    
  await Promise.all(promises);
}

錯誤處理

javascript
try {
  await sharp('input.jpg')
    .resize(300, 200)
    .toFile('output.jpg');
} catch (error) {
  console.error('圖像處理失敗:', error.message);
}

相關鏈接

基於 Apache 2.0 許可證發布