React Video Editor Documentation
Default Image Adapter
The default image adapter for React Video Editor
Default Image Adapter
The default image adapter handles local image files and remote URLs in React Video Editor.
Overview
The default image adapter is the standard adapter that comes with React Video Editor. It supports:
- Local image files (JPEG, PNG, WebP, etc.)
- Remote image URLs
- Image optimization and resizing
- Thumbnail generation
Usage
import { ImageAdapter } from 'react-video-editor';
const adapter = new ImageAdapter({
// Configuration options
});
// Load a local image file
const image = await adapter.load('/path/to/image.jpg');
// Load a remote image
const remoteImage = await adapter.load('https://example.com/image.png');Configuration
| Option | Type | Default | Description |
|---|---|---|---|
maxFileSize | number | 10MB | Maximum file size in bytes |
allowedFormats | string[] | ['jpg', 'jpeg', 'png', 'webp'] | Allowed image formats |
maxWidth | number | 4096 | Maximum image width |
maxHeight | number | 4096 | Maximum image height |
quality | number | 0.8 | Image quality (0-1) |
Supported Formats
- JPEG/JPG
- PNG
- WebP
- GIF
- SVG
- BMP
Features
Image Optimization
const optimizedImage = await adapter.optimize(image, {
width: 1920,
height: 1080,
quality: 0.8
});Thumbnail Generation
const thumbnail = await adapter.generateThumbnail(image, {
width: 320,
height: 180
});Format Conversion
const webpImage = await adapter.convert(image, 'webp');Error Handling
The default adapter includes built-in error handling for:
- Invalid file formats
- Network errors
- File size limits
- Corrupted image files
Examples
// Basic usage
const adapter = new ImageAdapter();
try {
const image = await adapter.load('/images/logo.png');
const thumbnail = await adapter.generateThumbnail(image, {
width: 200,
height: 200
});
console.log('Thumbnail created:', thumbnail.url);
} catch (error) {
console.error('Failed to process image:', error);
}