Saltare al contenuto

Avvio rapido

GitHub

Installare

Installazione

Puoi utilizzare la nostra configurazione assistita da AI per installare il plugin. Aggiungi le Capgo abilità al tuo strumento AI utilizzando il seguente comando:

Finestra del terminale
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Poi utilizza la seguente richiesta:

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

Se preferisci la configurazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche del tuo platform qui sotto:

Finestra del terminale
bun add @capgo/capacitor-file-compressor
bunx cap sync
import { FileCompressor } from '@capgo/capacitor-file-compressor';

Comprime un file di immagine con le dimensioni e le impostazioni di qualità specificate.

Questo metodo comprime le immagini per ridurre la dimensione del file mantenendo una qualità accettabile. Supporta la ridimensionamento e la conversione del formato (JPEG/WebP a seconda della piattaforma).

Nota importante:

  • I metadati EXIF vengono eliminati durante la compressione su tutte le piattaforme
  • L'aspetto rapporto viene mantenuto automaticamente se solo una dimensione è fornita
  • I file compressi vengono salvati in directory temporanee sulle piattaforme native
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);

Opzioni per comprimere un'immagine.

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;
}

Il risultato della compressione dell'immagine.

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;
}

Questa pagina è generata dal plugin e si trova su src/definitions.tsRiesegui la sincronizzazione quando le modifiche pubbliche API sono state apportate in fase di sviluppo.

Continua da Iniziare

Se stai utilizzando

Sezione intitolata “Continua da Iniziare” Avvio per pianificare lo storage e il trattamento dei file, connettilo con Utilizzare @capgo/capacitor-file-compressor per la capacità nativa in Utilizzare @capgo/capacitor-file-compressor, @capgo/capacitor-data-storage-sqlite per la dettaglio di implementazione in @capgo/capacitor-data-storage-sqlite, Utilizzare @capgo/capacitor-data-storage-sqlite per la capacità nativa in Utilizzare @capgo/capacitor-data-storage-sqlite, @capgo/capacitor-file per la dettaglio di implementazione in @capgo/capacitor-file, e Utilizzare @capgo/capacitor-file per la capacità nativa in Utilizzare @capgo/capacitor-file.