メインコンテンツへスキップ

スタートガイド

GitHub

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください:

ターミナル
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

次に、以下のプロンプトを使用します:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-file-compressor` plugin in my project.

手動セットアップを希望する場合は、以下のコマンドを実行してプラグインをインストールし、下記のプラットフォーム別の手順に従ってください:

ターミナル
bun add @capgo/capacitor-file-compressor
bunx cap sync
import { FileCompressor } from '@capgo/capacitor-file-compressor';
import { FileCompressor } from '@capgo/capacitor-file-compressor';
const result = await FileCompressor.compressImage({
path: photoUri,
width: 1280,
quality: 0.8,
mimeType: 'image/jpeg',
});
await uploadFile(result.path);
const result = await FileCompressor.compressImage({
blob: pickedFile,
quality: 0.75,
width: 1024,
mimeType: 'image/webp',
});
  • アップスケーリングなし: 解像度は大きな画像の縮小のみ行われます。
  • PNGサイズ: PNGには画質調整機能がないため、出力サイズが元画像より大きくなる場合があります。
  • EXIF: メタデータは削除されます。圧縮後の向き(orientation)タグには依存しないでください。

指定したサイズと画質設定で画像ファイルを圧縮します。

このメソッドは、画質を適切に保ちつつ、ファイルサイズを削減するために画像を圧縮します。 リサイズおよびフォーマット変換(プラットフォームによりJPEG/WebP)をサポートしています。

重要な注意点:

  • すべてのプラットフォームにおいて、圧縮時にEXIFメタデータは削除されます
  • 片方の次元のみを指定した場合、アスペクト比は自動的に維持されます
  • 圧縮されたファイルは、ネイティブプラットフォームのテンポラリディレクトリに保存されます
import { FileCompressor } from '@capgo/capacitor-file-compressor';
// Web - Compress from file input
const fileInput = document.getElementById('file') as HTMLInputElement;
const file = fileInput.files[0];
const result = await FileCompressor.compressImage({
blob: file,
quality: 0.8,
width: 1200,
mimeType: 'image/jpeg'
});
const url = URL.createObjectURL(result.blob);

画像を圧縮するためのオプション。

export interface CompressImageOptions {
/**
* The file path of the image to compress.
*
* **Platform:** Android, iOS only (not supported on Web)
*
* Accepts various path formats:
* - iOS: `file://` URLs or absolute paths
* - Android: `content://` URIs, `file://` URLs, or absolute paths
*
* @since 7.0.0
* @example "file:///var/mobile/Containers/Data/Application/image.jpg" // iOS
* @example "content://com.android.providers.downloads.documents/document/msf%3A1000000485" // Android
* @example "/storage/emulated/0/Download/photo.png" // Android absolute path
*/
path?: string;
/**
* The file blob of the image to compress.
*
* **Platform:** Web only (not supported on iOS/Android)
*
* Use this when compressing images from file inputs, fetch responses,
* or any other Blob source in web applications.
*
* @since 7.0.0
* @example
* ```typescript
* // From file input
* const fileInput = document.getElementById('file') as HTMLInputElement;
* const blob = fileInput.files[0];
* ```
* @example
* ```typescript
* // From fetch
* const response = await fetch('https://example.com/image.jpg');
* const blob = await response.blob();
* ```
*/
blob?: Blob;
/**
* The quality of the compressed image.
*
* **Range:** 0.0 to 1.0
* - `0.0` = Maximum compression (lowest quality, smallest file)
* - `1.0` = Minimum compression (highest quality, largest file)
* - `0.6` = Default balanced compression
*
* **Platform:** All platforms
*
* Higher quality values result in larger files but better visual quality.
* The actual compression ratio depends on the image content and format.
*
* @since 7.0.0
* @default 0.6
* @example 0.8 // High quality
* @example 0.5 // Medium quality, smaller file
* @example 0.3 // Low quality, very small file
*/
quality?: number;
/**
* The width of the compressed image in pixels.
*
* **Platform:** All platforms
*
* If only width is specified, height is calculated automatically
* to maintain the original aspect ratio.
*
* If both width and height are specified, the image is resized
* to exact dimensions (may distort if ratio differs).
*
* @since 7.0.0
* @example 1920 // Full HD width
* @example 1200 // Common web image width
* @example 800 // Mobile-optimized width
*/
width?: number;
/**
* The height of the compressed image in pixels.
*
* **Platform:** All platforms
*
* If only height is specified, width is calculated automatically
* to maintain the original aspect ratio.
*
* If both width and height are specified, the image is resized
* to exact dimensions (may distort if ratio differs).
*
* @since 7.0.0
* @example 1080 // Full HD height
* @example 800 // Common web image height
* @example 600 // Mobile-optimized height
*/
height?: number;
/**
* The MIME type of the compressed output image.
*
* **Platform Support:**
* - **iOS:** `image/jpeg` only
* - **Android:** `image/jpeg`, `image/.webp`
* - **Web:** `image/jpeg`, `image/.webp`
*
* **Format Characteristics:**
* - **JPEG:** Universal support, good for photos, no transparency
* - **WebP:** Better compression, supports transparency, not on iOS
*
* @since 7.0.0
* @default "image/jpeg"
* @example "image/jpeg" // JPEG format (all platforms)
* @example "image/.webp" // WebP format (Android/Web only)
*/
mimeType?: string;
}

画像の圧縮結果

export interface CompressImageResult {
/**
* The file path of the compressed image.
*
* **Platform:** Android, iOS only (undefined on Web)
*
* Points to a temporary file containing the compressed image.
* On iOS, typically in `NSTemporaryDirectory()`.
* On Android, typically in app cache directory.
*
* **Important:** These files may be cleaned up by the OS.
* Copy to permanent storage if needed for long-term use.
*
* @since 7.0.0
* @example "/var/mobile/Containers/Data/tmp/compressed_abc123.jpg" // iOS
* @example "/data/user/0/com.app/cache/compressed_xyz789.jpg" // Android
*/
path?: string;
/**
* The blob of the compressed image.
*
* **Platform:** Web only (undefined on iOS/Android)
*
* A Blob object containing the compressed image data.
* Can be used to:
* - Create object URLs for preview: `URL.createObjectURL(blob)`
* - Upload to server via FormData
* - Save to IndexedDB or other storage
* - Convert to base64 with FileReader
*
* @since 7.0.0
* @example
* ```typescript
* // Create preview URL
* const url = URL.createObjectURL(result.blob);
* imageElement.src = url;
* ```
* @example
* ```typescript
* // Upload to server
* const formData = new FormData();
* formData.append('image', result.blob, 'compressed.jpg');
* await fetch('/upload', { method: 'POST', body: formData });
* ```
*/
blob?: Blob;
}

このページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。

Getting Startedの続きを進める

「Getting Started からの続き」セクション

使用している場合 スタートガイド ストレージとファイル処理を計画するには、以下と連携してください: @capgo/capacitor-file-compressor を使用する @capgo/capacitor-file-compressor でネイティブ機能を利用するには、 @capgo/capacitor-data-storage-sqlite @capgo/capacitor-data-storage-sqlite の実装の詳細については、 @capgo/capacitor-data-storage-sqlite の使い方 「@capgo/capacitor-data-storage-sqliteの使用方法」におけるネイティブ機能について、 @capgo/capacitor-file @capgo/capacitor-file の実装の詳細については、 @capgo/capacitor-file の使い方 @capgo/capacitor-file. の使い方で扱うネイティブ機能については