クイックスタート

このガイドでは、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 ドキュメント を確認して、利用可能なすべてのメソッドを学ぶ
• 高度なサンプル を学んで、より多くのテクニックを習得
• パフォーマンス最適化 を学んで処理効率を向上