基本サンプル
ここでは、Sharp の基本的な使用例を提供し、すばやく始められるようにします。
画像サイズ変更
シンプルなリサイズ
javascript
import sharp from 'sharp';
// 指定サイズに変更
await sharp('input.jpg')
.resize(300, 200)
.toFile('output.jpg');アスペクト比を保持
javascript
// 幅のみ指定、高さは自動計算
await sharp('input.jpg')
.resize(300)
.toFile('output.jpg');
// 高さのみ指定、幅は自動計算
await sharp('input.jpg')
.resize(null, 200)
.toFile('output.jpg');フィットモード
javascript
// cover: アスペクト比を保持し、はみ出した部分をクロップ
await sharp('input.jpg')
.resize(300, 200, { fit: 'cover' })
.toFile('output.jpg');
// contain: アスペクト比を保持し、背景を追加
await sharp('input.jpg')
.resize(300, 200, { fit: 'contain', background: { r: 255, g: 255, b: 255 } })
.toFile('output.jpg');形式変換
JPEG から PNG へ
javascript
await sharp('input.jpg')
.png()
.toFile('output.png');PNG から JPEG へ
javascript
await sharp('input.png')
.jpeg({ quality: 80 })
.toFile('output.jpg');WebP に変換
javascript
await sharp('input.jpg')
.webp({ quality: 80 })
.toFile('output.webp');AVIF に変換
javascript
await sharp('input.jpg')
.avif({ quality: 80 })
.toFile('output.avif');画像回転
90度回転
javascript
await sharp('input.jpg')
.rotate(90)
.toFile('output.jpg');自動回転（EXIF に基づく）
javascript
await sharp('input.jpg')
.rotate() // 自動回転
.toFile('output.jpg');画像反転
垂直反転
javascript
await sharp('input.jpg')
.flip()
.toFile('output.jpg');水平反転
javascript
await sharp('input.jpg')
.flop()
.toFile('output.jpg');画像クロップ
指定領域をクロップ
javascript
await sharp('input.jpg')
.extract({ left: 100, top: 100, width: 300, height: 200 })
.toFile('output.jpg');クロップしてリサイズ
javascript
await sharp('input.jpg')
.extract({ left: 100, top: 100, width: 300, height: 200 })
.resize(150, 100)
.toFile('output.jpg');フィルタ効果
グレースケール変換
javascript
await sharp('input.jpg')
.grayscale()
.toFile('output.jpg');ぼかし効果
javascript
await sharp('input.jpg')
.blur(5)
.toFile('output.jpg');シャープ化効果
javascript
await sharp('input.jpg')
.sharpen()
.toFile('output.jpg');色反転
javascript
await sharp('input.jpg')
.negate()
.toFile('output.jpg');色調整
明るさ調整
javascript
await sharp('input.jpg')
.modulate({ brightness: 1.2 })
.toFile('output.jpg');彩度調整
javascript
await sharp('input.jpg')
.modulate({ saturation: 0.8 })
.toFile('output.jpg');色相調整
javascript
await sharp('input.jpg')
.modulate({ hue: 180 })
.toFile('output.jpg');透明度処理
透明度を追加
javascript
await sharp('input.jpg')
.ensureAlpha()
.png()
.toFile('output.png');透明度を削除
javascript
await sharp('input.png')
.flatten({ background: { r: 255, g: 255, b: 255 } })
.jpeg()
.toFile('output.jpg');品質設定
JPEG 品質
javascript
// 高品質
await sharp('input.png')
.jpeg({ quality: 95 })
.toFile('output.jpg');
// 中品質
await sharp('input.png')
.jpeg({ quality: 80 })
.toFile('output.jpg');
// 低品質（小ファイル）
await sharp('input.png')
.jpeg({ quality: 50 })
.toFile('output.jpg');WebP 品質
javascript
await sharp('input.jpg')
.webp({ quality: 80, lossless: false })
.toFile('output.webp');チェーン操作
複数の操作を組み合わせ
javascript
await sharp('input.jpg')
.resize(800, 600)
.rotate(90)
.blur(2)
.sharpen()
.jpeg({ quality: 80 })
.toFile('output.jpg');条件付き処理
javascript
const image = sharp('input.jpg').resize(300, 200);
if (needsBlur) {
image.blur(3);
}
if (needsSharpen) {
image.sharpen();
}
await image.jpeg({ quality: 80 }).toFile('output.jpg');エラー処理
基本的なエラー処理
javascript
try {
await sharp('input.jpg')
.resize(300, 200)
.toFile('output.jpg');
} catch (error) {
console.error('画像処理失敗:', error.message);
}ファイル存在チェック
javascript
const fs = require('fs');
if (fs.existsSync('input.jpg')) {
await sharp('input.jpg')
.resize(300, 200)
.toFile('output.jpg');
} else {
console.error('入力ファイルが存在しません');
}ストリーム処理
ストリームから読み取り
javascript
const fs = require('fs');
fs.createReadStream('input.jpg')
.pipe(sharp().resize(300, 200))
.pipe(fs.createWriteStream('output.jpg'));ストリームに出力
javascript
const fs = require('fs');
sharp('input.jpg')
.resize(300, 200)
.jpeg({ quality: 80 })
.pipe(fs.createWriteStream('output.jpg'));Buffer 処理
Buffer から作成
javascript
const fs = require('fs');
const inputBuffer = fs.readFileSync('input.jpg');
const outputBuffer = await sharp(inputBuffer)
.resize(300, 200)
.jpeg({ quality: 80 })
.toBuffer();
fs.writeFileSync('output.jpg', outputBuffer);Buffer に出力
javascript
const buffer = await sharp('input.jpg')
.resize(300, 200)
.jpeg({ quality: 80 })
.toBuffer();
// buffer を直接使用可能
console.log('画像サイズ:', buffer.length);バッチ処理
ディレクトリ内のすべての画像を処理
javascript
const fs = require('fs').promises;
const path = require('path');
async function processImages(inputDir, outputDir) {
const files = await fs.readdir(inputDir);
for (const file of files) {
if (file.match(/\.(jpg|jpeg|png|webp)$/i)) {
try {
await sharp(path.join(inputDir, file))
.resize(300, 200)
.jpeg({ quality: 80 })
.toFile(path.join(outputDir, file));
console.log(`処理完了: ${file}`);
} catch (error) {
console.error(`${file} の処理失敗:`, error.message);
}
}
}
}
processImages('./input', './output');