Image Output

/**
 * Reference to a native instance of an image with properties and save capabilities
 */
class ImageRef {
  /** Width of the image in pixels */
  readonly width: number;
  /** Height of the image in pixels */
  readonly height: number;
  
  /**
   * Saves the image to the file system in the cache directory
   * @param options - Configuration for saving the image
   * @returns Promise resolving to ImageResult with URI and metadata
   */
  saveAsync(options?: SaveOptions): Promise<ImageResult>;
}

import { ImageManipulator, SaveFormat } from "expo-image-manipulator";

// Basic save with default options
const context = ImageManipulator.manipulate(imageUri);
const image = await context.resize({ width: 300 }).renderAsync();

console.log(`Image dimensions: ${image.width}x${image.height}`);

const result = await image.saveAsync();
console.log(`Saved to: ${result.uri}`);

// Save with specific format and compression
const result2 = await image.saveAsync({
  format: SaveFormat.PNG,
  compress: 0.8,
  base64: true
});

console.log(`PNG saved to: ${result2.uri}`);
console.log(`Base64 data: ${result2.base64?.substring(0, 50)}...`);

// Clean up
context.release();
image.release();

/**
 * Configuration options for saving images
 */
interface SaveOptions {
  /** Whether to include base64 encoded image data in the result */
  base64?: boolean;
  /** Compression level from 0.0 (highest compression, lowest quality) to 1.0 (no compression, highest quality) */
  compress?: number;
  /** Output image format */
  format?: SaveFormat;
}

// Maximum quality JPEG
const highQuality = await image.saveAsync({
  format: SaveFormat.JPEG,
  compress: 1.0,
  base64: false
});

// Highly compressed PNG with base64
const compressed = await image.saveAsync({
  format: SaveFormat.PNG,
  compress: 0.3,
  base64: true
});

// WebP format (if supported)
const webp = await image.saveAsync({
  format: SaveFormat.WEBP,
  compress: 0.7
});

// Default options (JPEG, compress: 1.0, base64: false)
const defaultSave = await image.saveAsync();

/**
 * Supported image output formats
 */
enum SaveFormat {
  /** JPEG format - faster processing, lossy compression, smaller file sizes */
  JPEG = 'jpeg',
  /** PNG format - lossless compression, supports transparency, larger file sizes */
  PNG = 'png',
  /** WebP format - modern format with efficient compression (may not be supported on all platforms) */
  WEBP = 'webp'
}

import { SaveFormat } from "expo-image-manipulator";

// JPEG - best for photos, smaller files
const jpegResult = await image.saveAsync({
  format: SaveFormat.JPEG,
  compress: 0.8
});

// PNG - best for graphics with transparency, larger files
const pngResult = await image.saveAsync({
  format: SaveFormat.PNG,
  compress: 0.9 // PNG compression affects processing time, not quality
});

// WebP - modern format with good compression
const webpResult = await image.saveAsync({
  format: SaveFormat.WEBP,
  compress: 0.7
});

/**
 * Result object returned after image manipulation and saving
 */
interface ImageResult {
  /** URI to the saved image file (usable as source for Image components) */
  uri: string;
  /** Width of the saved image in pixels */
  width: number;  
  /** Height of the saved image in pixels */
  height: number;
  /** Base64 encoded image data (included if base64 option was true) */
  base64?: string;
}

// Save with base64 data
const result = await image.saveAsync({
  format: SaveFormat.JPEG,
  compress: 0.8,
  base64: true
});

// Use the saved image
console.log(`Image saved to: ${result.uri}`);
console.log(`Dimensions: ${result.width}x${result.height}`);

// Use in React Native Image component
<Image source={{ uri: result.uri }} style={{ width: result.width, height: result.height }} />

// Use base64 data if available
if (result.base64) {
  const dataUri = `data:image/jpeg;base64,${result.base64}`;
  console.log(`Data URI: ${dataUri.substring(0, 50)}...`);
}

// Save to device photo library (requires additional permissions)
if (result.uri) {
  // await MediaLibrary.saveToLibraryAsync(result.uri);
}

const context = ImageManipulator.manipulate(imageUri);
const image = await context
  .resize({ width: 400 })
  .rotate(90)
  .renderAsync();

// Save as high-quality JPEG
const jpegResult = await image.saveAsync({
  format: SaveFormat.JPEG,
  compress: 0.95
});

// Save as compressed PNG with base64
const pngResult = await image.saveAsync({
  format: SaveFormat.PNG,
  compress: 0.5,
  base64: true
});

// Save as WebP
const webpResult = await image.saveAsync({
  format: SaveFormat.WEBP,
  compress: 0.7
});

console.log('Saved in multiple formats:');
console.log(`JPEG: ${jpegResult.uri}`);
console.log(`PNG: ${pngResult.uri}`);  
console.log(`WebP: ${webpResult.uri}`);

// Clean up
context.release();
image.release();

try {
  const result = await image.saveAsync({
    format: SaveFormat.JPEG,
    compress: 0.8
  });
  console.log(`Successfully saved: ${result.uri}`);
} catch (error) {
  console.error('Failed to save image:', error);
  // Handle insufficient storage, invalid format, etc.
}