rn-remove-image-bg 0.0.23 → 0.0.24

package/lib/web/utils/uriHelper.js

@@ -0,0 +1,46 @@
+/**
+ * Helper to normalize React Native URIs for Web consumption.
+ * Handles file://, asset://, and data: URIs.
+ */
+export async function normalizeUri(uri) {
+    if (!uri)
+        return '';
+    // Handle data URIs (return as is)
+    if (uri.startsWith('data:')) {
+        return uri;
+    }
+    // Handle http/https (return as is)
+    if (uri.startsWith('http')) {
+        return uri;
+    }
+    // Handle Expo asset:// URIs (convert to http relative path if needed, or pass through)
+    // In Expo Web, bundled assets are usually served from /assets/
+    if (uri.startsWith('asset://')) {
+        // NOTE: complex asset:// handling might require expo-asset, 
+        // but often on web the uri passed is already resolved or a relative path.
+        // For now, we return it. If it fails, we might need 'expo-asset' module.
+        return uri.replace('asset://', '/assets/');
+    }
+    // Handle file:// URIs
+    // On web, file:// is blocked for security unless it's a blob url created by the app
+    if (uri.startsWith('file://')) {
+        // If it's a local file picked by user, it might be a blob: reference in disguise or invalid.
+        // We strip the protocol for relative paths check.
+        return uri;
+    }
+    // Relative paths
+    return uri;
+}
+/**
+ * Loads an image from a URI into an HTMLImageElement for processing.
+ * Handles CORS cross-origin issues.
+ */
+export function loadImage(uri) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous'; // Enable CORS
+        img.onload = () => resolve(img);
+        img.onerror = (e) => reject(new Error(`Failed to load image at ${uri}: ${String(e)}`));
+        img.src = uri;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "rn-remove-image-bg",
   "homepage": "https://github.com/a-eid/rn-remove-image-bg",
   "main": "lib/index",
@@ -35,11 +35,22 @@
     "*.podspec",
     "README.md"
   ],
+  "scripts": {
+    "postinstall": "tsc || exit 0;",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf android/build node_modules/**/android/build lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "lint-ci": "eslint \"**/*.{js,ts,tsx}\" -f @jamesacarr/github-actions",
+    "typescript": "tsc",
+    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\"",
+    "prepare": "npm run typescript",
+    "test": "vitest run"
+  },
   "author": "Ahmed Eid <a.eid@yandex.com> (https://github.com/a-eid)",
   "license": "MIT",
   "devDependencies": {
-    "@react-native/eslint-config": "0.82.0",
     "@biomejs/biome": "^2.3.11",
+    "@react-native/eslint-config": "0.82.0",
     "@types/react": "^19.1.03",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -52,11 +63,11 @@
     "vitest": "^3.0.0"
   },
   "peerDependencies": {
+    "expo-file-system": "*",
+    "expo-image-manipulator": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-nitro-modules": "0.31.10",
-    "expo-file-system": "*",
-    "expo-image-manipulator": "*"
+    "react-native-nitro-modules": "0.31.10"
   },
   "eslintConfig": {
     "root": true,
@@ -85,19 +96,9 @@
     "lib/"
   ],
   "dependencies": {
-    "@huggingface/transformers": "^3.8.1",
+    "@imgly/background-removal": "^1.7.0",
     "buffer": "^6.0.3",
     "thumbhash": "^0.1.1",
     "upng-js": "^2.1.0"
-  },
-  "scripts": {
-    "postinstall": "tsc || exit 0;",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf android/build node_modules/**/android/build lib",
-    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
-    "lint-ci": "eslint \"**/*.{js,ts,tsx}\" -f @jamesacarr/github-actions",
-    "typescript": "tsc",
-    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\"",
-    "test": "vitest run"
   }
-}
+}

package/src/ImageProcessing.web.ts

@@ -1,186 +1,120 @@
+import { BackgroundRemover } from './web/core/BackgroundRemover';
+import { cacheManager } from './web/core/CacheManager';
+import { compressImage as compressImageWeb } from './web/utils/CompressImage';
+import { generateThumbhash as generateThumbhashWeb } from './web/utils/ThumbhashGenerator';
+import { blobToDataUrl } from './web/utils/formatConverter';
+import type { 
+  RemoveBgImageOptions, 
+  CompressImageOptions, 
+  GenerateThumbhashOptions, 
+  OutputFormat 
+} from './web/core/types';
+
+// Re-export types
+export type { 
+  RemoveBgImageOptions, 
+  CompressImageOptions, 
+  GenerateThumbhashOptions, 
+  OutputFormat 
+};
+
+// Compatibility for NativeRemoveBackgroundOptions
+export type NativeRemoveBackgroundOptions = RemoveBgImageOptions;
+
 /**
- * Web implementation using @imgly/background-removal via Script Tag.
- * Requires the script to be added manually to index.html.
+ * Remove background from image (Web Implementation)
  */
-
-export type OutputFormat = 'PNG' | 'WEBP';
-
-export interface RemoveBgImageOptions {
-  format?: OutputFormat;
-  quality?: number;
-  onProgress?: (progress: number) => void;
-  debug?: boolean;
-}
-
-// Check for global variable
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const imglyRemoveBackground: any;
-
 export async function removeBgImage(
   uri: string,
   options: RemoveBgImageOptions = {}
 ): Promise<string> {
-    const { onProgress, debug = false } = options;
-    
-    // Safety check
-    // @ts-ignore
-    if (typeof window !== 'undefined' && !window.imglyRemoveBackground) {
-       // Also check if user defined it as imglyRemoveBackground globally
-       // @ts-ignore
-       if (typeof imglyRemoveBackground !== 'undefined') {
-          // @ts-ignore
-          window.imglyRemoveBackground = imglyRemoveBackground;
-       }
+  const { onProgress, useCache = true, debug = false } = options;
+
+  if (debug) console.log('[Web] removeBgImage called with:', uri, options);
+
+  // 1. Check Cache
+  if (useCache) {
+    const cached = cacheManager.get(uri, options);
+    if (cached) {
+      if (debug) console.log('[Web] Cache hit');
+      onProgress?.(100);
+      return cached;
     }
+  }
 
-    // @ts-ignore
-    if (typeof window.imglyRemoveBackground === 'undefined') {
-       throw new Error(
-         '[rn-remove-image-bg] Library not found. Please add the following script to your web index.html:\n' +
-         '<script type="module">\n' +
-         '  import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm";\n' +
-         '  window.imglyRemoveBackground = removeBackground;\n' +
-         '</script>'
-       );
+  // 2. Process
+  onProgress?.(10); // Start
+  const blob = await BackgroundRemover.remove(uri, {
+    ...options,
+    onProgress: (p) => {
+      // Map progress to 10-90 range to leave room for start/end
+      const mapped = 10 + Math.round((p * 0.8)); 
+      onProgress?.(mapped);
     }
-    
-    if (debug) console.log('[rmbg] Starting...');
-    onProgress?.(1); 
-    
-    // Config for imgly
-    const config = {
-       debug: debug,
-       // Point publicPath to CDN for assets (wasm/models)
-       publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
-       progress: (_key: string, current: number, total: number) => {
-          if (onProgress && total > 0) {
-             onProgress((current / total) * 100);
-          }
-       }
-    };
-    
-    // @ts-ignore
-    const blob = await window.imglyRemoveBackground(uri, config);
-    onProgress?.(100);
-    
-    // Convert blob to DataURL
-    return new Promise((resolve, reject) => {
-       const reader = new FileReader();
-       reader.onloadend = () => resolve(reader.result as string);
-       reader.onerror = reject;
-       reader.readAsDataURL(blob);
-    });
-}
+  });
 
-export const removeBackground = removeBgImage;
+  // 3. Convert to Data URL
+  const dataUrl = await blobToDataUrl(blob);
+  onProgress?.(100);
 
-// ==========================================
-// UTILITIES (Main Thread - lightweight)
-// ==========================================
-
-// Helper to load image
-function loadImage(src: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => resolve(img);
-    img.onerror = reject;
-    img.src = src;
-  });
-}
+  // 4. Cache Result
+  if (useCache) {
+    cacheManager.set(uri, options, dataUrl);
+  }
 
-export interface CompressImageOptions {
-  maxSizeKB?: number;
-  width?: number;
-  height?: number;
-  quality?: number;
-  format?: 'webp' | 'png' | 'jpeg';
+  return dataUrl;
 }
 
-export interface GenerateThumbhashOptions {
-  size?: number;
-}
+/**
+ * Backward compatibility alias
+ * @deprecated Use removeBgImage
+ */
+export const removeBackground = removeBgImage;
 
+/**
+ * Compress image (Web Implementation)
+ */
 export async function compressImage(
   uri: string,
   options: CompressImageOptions = {}
 ): Promise<string> {
-  const {
-    maxSizeKB = 250,
-    width = 1024,
-    height = 1024,
-    quality = 0.85,
-    format = 'webp',
-  } = options;
-
-  try {
-    const img = await loadImage(uri);
-    const scale = Math.min(width / img.width, height / img.height, 1);
-    const targetWidth = Math.round(img.width * scale);
-    const targetHeight = Math.round(img.height * scale);
-
-    const canvas = document.createElement('canvas');
-    canvas.width = targetWidth;
-    canvas.height = targetHeight;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('Could not get canvas context');
-    ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-
-    const mimeType = format === 'png' ? 'image/png' : format === 'jpeg' ? 'image/jpeg' : 'image/webp';
-    let dataUrl = canvas.toDataURL(mimeType, quality);
-
-    // Reduce quality if over size limit
-    let currentQuality = quality;
-    const getSize = (url: string) => ((url.split(',')[1] || '').length * 3) / 4 / 1024;
-    while (getSize(dataUrl) > maxSizeKB && currentQuality > 0.5) {
-      currentQuality -= 0.1;
-      dataUrl = canvas.toDataURL(mimeType, currentQuality);
-    }
-
-    return dataUrl;
-  } catch (error) {
-    console.warn('[rmbg] compressImage failed:', error);
-    return uri;
-  }
+  return compressImageWeb(uri, options);
 }
 
+/**
+ * Generate thumbhash (Web Implementation)
+ */
 export async function generateThumbhash(
-  imageUri: string,
-  options: GenerateThumbhashOptions = {}
+  uri: string,
+  _options: GenerateThumbhashOptions = {}
 ): Promise<string> {
-  const { size = 32 } = options;
-
-  try {
-    const img = await loadImage(imageUri);
-    
-    const canvas = document.createElement('canvas');
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('Could not get canvas context');
-    ctx.drawImage(img, 0, 0, size, size);
-
-    const imageData = ctx.getImageData(0, 0, size, size);
-    
-    // Load thumbhash from CDN
-    // @ts-ignore
-    const { rgbaToThumbHash } = await import(/* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/thumbhash@0.1/+esm');
-    const hash = rgbaToThumbHash(size, size, imageData.data);
-    return btoa(String.fromCharCode(...hash));
-  } catch (error) {
-    console.warn('[rmbg] generateThumbhash failed:', error);
-    return '';
-  }
+  // Web implementation currently doesn't use options (size hardcoded or auto-scaled)
+  return generateThumbhashWeb(uri);
+}
+
+// Cache Management APIs
+
+export async function clearCache(_deleteFiles = false): Promise<void> {
+  cacheManager.clear();
+  console.log('[Web] Cache cleared');
+}
+
+export function getCacheSize(): number {
+  return cacheManager.size();
+}
+
+export async function onLowMemory(_deleteFiles = true): Promise<number> {
+  const size = cacheManager.size();
+  cacheManager.clear();
+  console.log(`[Web] Cleared ${size} items due to low memory`);
+  return size;
 }
 
-export async function clearCache(): Promise<void> {
-  // Caching is handled internally by the library
+export function configureCache(_config: Record<string, unknown>): void {
+  // Web cache is simple in-memory LRU, config not fully supported yet but stubbed
+  console.log('[Web] Cache configuration updated (no-op on web)');
 }
 
-export function getCacheSize(): number { return 0; }
-export async function onLowMemory(): Promise<number> {
-  await clearCache();
-  return 0;
+export function getCacheDirectory(): string {
+  return ''; // No file system on web
 }
-export function configureCache(_config: { maxEntries?: number }): void {}
-export function getCacheDirectory(): string { return ''; }

package/src/web/core/BackgroundRemover.ts

@@ -0,0 +1,39 @@
+import { removeBackground as imglyRemove, type Config } from '@imgly/background-removal';
+import type { RemoveBgImageOptions } from './types';
+import { mapErrorToBackgroundRemovalError } from '../errors/WebErrorAdapter';
+import { normalizeUri } from '../utils/uriHelper';
+
+export const BackgroundRemover = {
+  /**
+   * Removes background from an image.
+   * Returns a Blobl of the processed image (PNG).
+   */
+  async remove(uri: string, options: RemoveBgImageOptions): Promise<Blob> {
+    try {
+      const normalizedUri = await normalizeUri(uri);
+      
+      const config: Config = {
+        // Pass publicPath if provided (for self-hosted assets)
+        publicPath: options.publicPath,
+        
+        // Map progress callback
+        progress: (_key: string, current: number, total: number) => {
+          if (options.onProgress && total > 0) {
+            const p = Math.min(100, Math.round((current / total) * 100));
+            options.onProgress(p);
+          }
+        },
+        
+        // Enable debug logging if requested
+        debug: options.debug ?? false,
+      };
+
+      // Execute removal
+      const blob = await imglyRemove(normalizedUri, config);
+      return blob;
+
+    } catch (error) {
+      throw mapErrorToBackgroundRemovalError(error);
+    }
+  }
+};

package/src/web/core/CacheManager.ts

@@ -0,0 +1,76 @@
+import type { RemoveBgImageOptions } from './types';
+
+interface CacheEntry {
+  dataUrl: string; // The processed image as Data URL
+  timestamp: number;
+}
+
+export class CacheManager {
+  private cache: Map<string, CacheEntry>;
+  private readonly MAX_SIZE = 50; // Limit to 50 items to avoid memory leaks
+
+  constructor() {
+    this.cache = new Map();
+  }
+
+  /**
+   * Generates a unique cache key based on input URI and processing options
+   */
+  private generateKey(uri: string, options: RemoveBgImageOptions): string {
+    // We include relevant options that affect output
+    const { format = 'PNG', quality = 100, maxDimension = 0 } = options;
+    return `${uri}|${format}|${quality}|${maxDimension}`;
+  }
+
+  public get(uri: string, options: RemoveBgImageOptions): string | null {
+    const key = this.generateKey(uri, options);
+    const entry = this.cache.get(key);
+    if (entry) {
+      entry.timestamp = Date.now(); // Update usage timestamp (simple LRU)
+      return entry.dataUrl;
+    }
+    return null;
+  }
+
+  public set(uri: string, options: RemoveBgImageOptions, dataUrl: string): void {
+    const key = this.generateKey(uri, options);
+    
+    // Evict if full
+    if (this.cache.size >= this.MAX_SIZE) {
+      this.evictOldest();
+    }
+
+    this.cache.set(key, {
+      dataUrl,
+      timestamp: Date.now()
+    });
+  }
+
+  public clear(): void {
+    this.cache.clear();
+  }
+
+  public size(): number {
+    return this.cache.size;
+  }
+
+  private evictOldest(): void {
+    // Find oldest entry
+    let oldestKey: string | null = null;
+    let oldestTime = Infinity;
+
+    for (const [key, entry] of this.cache.entries()) {
+      if (entry.timestamp < oldestTime) {
+        oldestTime = entry.timestamp;
+        oldestKey = key;
+      }
+    }
+
+    if (oldestKey) {
+      this.cache.delete(oldestKey);
+    }
+  }
+}
+
+// Singleton instance
+export const cacheManager = new CacheManager();

package/src/web/core/types.ts

@@ -0,0 +1,56 @@
+export type OutputFormat = 'PNG' | 'WEBP';
+
+export interface RemoveBgImageOptions {
+  /**
+   * Output format of the processed image.
+   * Default: 'PNG'
+   */
+  format?: OutputFormat;
+  
+  /**
+   * Quality of the output image (0-100). Only applies to WEBP/JPEG.
+   * Default: 100
+   */
+  quality?: number;
+  
+  /**
+   * Callback to track download and processing progress (0-100).
+   */
+  onProgress?: (progress: number) => void;
+  
+  /**
+   * Enable debug logging.
+   * Default: false
+   */
+  debug?: boolean;
+  
+  /**
+   * Maximum dimension for the output image. Use this to resize large images before processing.
+   */
+  maxDimension?: number;
+
+  /**
+   * Public path to serve the model assets from. 
+   * If not provided, it will attempt to fetch from @imgly CDN.
+   * Important for Metro bundler compatibility if not using CDN.
+   */
+  publicPath?: string;
+
+  /**
+   * Whether to use the cache for this request.
+   * Default: true
+   */
+  useCache?: boolean;
+}
+
+export interface CompressImageOptions {
+  maxSizeKB?: number;
+  width?: number;
+  height?: number;
+  quality?: number;
+  format?: 'webp' | 'png' | 'jpeg';
+}
+
+export interface GenerateThumbhashOptions {
+  size?: number;
+}

package/src/web/errors/WebErrorAdapter.ts

@@ -0,0 +1,44 @@
+export class BackgroundRemovalError extends Error {
+  code: string;
+
+  constructor(message: string, code: string = 'UNKNOWN_ERROR') {
+    super(message);
+    this.name = 'BackgroundRemovalError';
+    this.code = code;
+  }
+}
+
+/**
+ * Maps library errors to standardized BackgroundRemovalError
+ */
+export function mapErrorToBackgroundRemovalError(error: unknown): BackgroundRemovalError {
+  if (error instanceof BackgroundRemovalError) return error;
+  
+  const message = error instanceof Error ? error.message : String(error);
+  
+  // Model loading errors
+  if (message.includes('fetch') || message.includes('network') || message.includes('Failed to load resource')) {
+    return new BackgroundRemovalError(
+      `Failed to download AI model. Please check your internet connection. (Details: ${message})`,
+      'MODEL_DOWNLOAD_ERROR'
+    );
+  }
+  
+  // WASM errors
+  if (message.includes('wasm') || message.includes('WebAssembly')) {
+     return new BackgroundRemovalError(
+      `WebAssembly failed to initialize. Your browser might not support it. (Details: ${message})`,
+      'WASM_INIT_ERROR'
+     );
+  }
+
+  // Processing errors
+  if (message.includes('memory') || message.includes('allocation')) {
+    return new BackgroundRemovalError(
+      'Out of memory. Try using a smaller maxDimension or closing other tabs.',
+      'MEMORY_ERROR'
+    );
+  }
+
+  return new BackgroundRemovalError(message);
+}

package/src/web/utils/CompressImage.ts

@@ -0,0 +1,38 @@
+import type { CompressImageOptions } from '../core/types';
+import { loadImage } from './uriHelper';
+
+export async function compressImage(uri: string, options: CompressImageOptions): Promise<string> {
+  const img = await loadImage(uri);
+  
+  let { width, height, quality = 0.8, format = 'jpeg' } = options;
+  
+  // Default dimensions to original if not specified
+  if (!width) width = img.naturalWidth;
+  if (!height) height = img.naturalHeight;
+  
+  // Calculate aspect ratio if one dimension is missing (though simpler to just use natural if both default)
+  const ratio = img.naturalWidth / img.naturalHeight;
+  if (options.width && !options.height) height = Math.round(width / ratio);
+  if (options.height && !options.width) width = Math.round(height * ratio);
+
+  // Normalize format
+  const mimeType = format === 'png' ? 'image/png' : format === 'webp' ? 'image/webp' : 'image/jpeg';
+  
+  // Create canvas
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  
+  if (!ctx) {
+    throw new Error('Canvas 2D context not available');
+  }
+
+  // Draw image
+  ctx.drawImage(img, 0, 0, width, height);
+
+  // Export
+  // Note: quality (0-1) is ignored for PNG
+  const dataUrl = canvas.toDataURL(mimeType, quality);
+  return dataUrl;
+}