はじめに

1. パッケージをインストール

   npm

   npm i @capgo/capacitor-file-compressor

   pnpm

   pnpm add @capgo/capacitor-file-compressor

   yarn

   yarn add @capgo/capacitor-file-compressor

   bun

   bun add @capgo/capacitor-file-compressor

2. ネイティブプロジェクトと同期

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

プラットフォームサポート

プラットフォーム	サポート形式	備考
iOS	JPEG	JPEG圧縮のみサポート
Android	JPEG, WebP	両方の形式を完全サポート
Web	JPEG, WebP	Canvas APIベースの圧縮

注: すべてのプラットフォームで圧縮中にEXIFメタデータは削除されます。

使用方法

プラグインをインポートして画像を圧縮:

import { FileCompressor } from '@capgo/capacitor-file-compressor';

// 画像を圧縮
const compressImage = async () => {
  const result = await FileCompressor.compressImage({
    source: 'file:///path/to/image.jpg',
    quality: 0.8,
    width: 1920,
    height: 1080
  });

  console.log('Compressed image path:', result.path);
  console.log('Original size:', result.originalSize);
  console.log('Compressed size:', result.size);
};

APIリファレンス

compressImage(options)

指定された寸法と品質設定で画像ファイルを圧縮します。

interface CompressImageOptions {
  source: string;           // 画像ファイルへのパス
  quality?: number;         // 0.0から1.0 (デフォルト: 0.8)
  width?: number;           // ターゲット幅(ピクセル単位)
  height?: number;          // ターゲット高さ(ピクセル単位)
  format?: 'jpeg' | '.webp'; // 出力形式
}

interface CompressImageResult {
  path: string;             // 圧縮画像へのパス
  size: number;             // 圧縮ファイルサイズ(バイト単位)
  originalSize: number;     // 元のファイルサイズ(バイト単位)
}

const result = await FileCompressor.compressImage(options);

重要な注意事項:

• すべてのプラットフォームで圧縮中にEXIFメタデータは削除されます
• 一つの寸法のみが提供された場合、アスペクト比は自動的に維持されます
• ネイティブプラットフォームでは、圧縮ファイルは一時ディレクトリに保存されます

getPluginVersion()

ネイティブプラグインのバージョンを取得します。

const { version } = await FileCompressor.getPluginVersion();
console.log('Plugin version:', version);

完全な例

import { FileCompressor } from '@capgo/capacitor-file-compressor';
import { Camera } from '@capacitor/camera';

export class ImageCompressionService {
  async captureAndCompress() {
    try {
      // 写真を撮影
      const photo = await Camera.getPhoto({
        quality: 100,
        allowEditing: false,
        resultType: 'uri'
      });

      if (!photo.path) {
        throw new Error('No image path');
      }

      // 写真を圧縮
      const compressed = await FileCompressor.compressImage({
        source: photo.path,
        quality: 0.7,
        width: 1920,
        height: 1080,
        format: 'jpeg'
      });

      console.log(`Compression ratio: ${
        ((1 - compressed.size / compressed.originalSize) * 100).toFixed(1)
      }%`);

      return compressed.path;
    } catch (error) {
      console.error('Compression failed:', error);
      throw error;
    }
  }

  async batchCompress(imagePaths: string[]) {
    const results = [];

    for (const path of imagePaths) {
      try {
        const result = await FileCompressor.compressImage({
          source: path,
          quality: 0.8,
          width: 1280
        });
        results.push(result);
      } catch (error) {
        console.error(`Failed to compress ${path}:`, error);
      }
    }

    return results;
  }
}

ベストプラクティス

1. 品質設定: ファイルサイズと画像品質のバランスを取るために0.8の品質から始める
2. リサイズ寸法: 必要な場合にのみ寸法を指定 - アスペクト比は自動的に保持されます
3. 形式の選択: 写真にはJPEGを、より良い圧縮にはWebPを使用(Android/Webのみ)
4. エラーハンドリング: 常に圧縮呼び出しをtry-catchブロックで囲む
5. クリーンアップ: 使用後は一時ファイルをクリーンアップすることを忘れないでください

トラブルシューティング

よくある問題

画像が圧縮されない: ソースパスが有効でアクセス可能であることを確認してください メモリ不足: ターゲット寸法を小さくするか、一度に1つの画像を圧縮してください 形式がサポートされていない: 上記のプラットフォームサポート表を確認してください