开始使用
复制一个包含安装步骤和本插件的完整 Markdown 指南的设置提示。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-file-compressor`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/file-compressor/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
标题:安装bun add @capgo/capacitor-file-compressorbunx cap sync导入
导入import { FileCompressor } from '@capgo/capacitor-file-compressor';compressImage
压缩图片文件,指定尺寸和质量设置。该方法压缩图片以减小文件大小,同时保持可接受的质量。 它支持调整大小和格式转换(JPEG/WebP视乎平台)。
重要注意事项:
在所有平台上,压缩图片时会移除EXIF元数据
- 压缩图片
- 如果只提供一个维度,会自动维持宽高比
- 压缩文件保存到本地平台的临时目录
import { FileCompressor } from '@capgo/capacitor-file-compressor';
// Web - Compress from file inputconst 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);类型参考
类型参考CompressImageOptions
压缩图片选项压缩图片选项
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;}CompressImageResult
压缩图片结果压缩图片结果
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当公共 API 上游发生变化时,请重新同步。