圖像處理 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);
}