rn-remove-image-bg 0.0.19 → 0.0.22

package/README.md

@@ -326,14 +326,20 @@ try {
 
 ### Web
 
-- **Technology**: @imgly/background-removal (WebAssembly + ONNX)
-- **Model**: Downloads ~35MB on first use
-- **Output**: Data URL (`data:image/png;base64,...`) or WEBP
-- **Note**: Works in modern browsers with WebAssembly support
+1. **Add the Script**: You must add the `@imgly/background-removal` script to your web `index.html`:
+   ```html
+   <script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>
+   ```
+
+2. **Usage**: The library will automatically detect the global `imglyBackgroundRemoval` object.
 
-> **Return Value Difference**: Web returns data URLs instead of file paths. Both work with `<Image>` components.
+- **Technology**: [@imgly/background-removal](https://github.com/imgly/background-removal-js) running in a Web Worker (managed by the library).
+- **Performance**: Zero UI blocking.
+- **Output**: Data URL (`data:image/png;base64,...`) or WEBP Blob.
+- **Requirements**:
+  - **CORS**: Images loaded from external URLs must be CORS-enabled (`Access-Control-Allow-Origin: *`).
 
-If you don't need web support, you can tree-shake the `@imgly/background-removal` dependency.
+> **Note**: The first call will download the WASM model files (~10MB) from the CDN. Ensure your CSP allows `cdn.jsdelivr.net`.
 
 ---
 
@@ -416,10 +422,9 @@ If you don't need web support, you can tree-shake the `@imgly/background-removal
 
 ### Web Not Working?
 
-1. Check browser console for errors
-2. Ensure your bundler supports WebAssembly
-3. The first call downloads a ~35MB WASM model
-4. CORS may block model download - check network tab
+1. **CSP Errors**: If you see "Content Security Policy" errors, ensure your app allows loading scripts/workers from `https://cdn.jsdelivr.net` and `blob:` URLs.
+2. **CORS Errors**: If loading an image from a URL, the server *must* return `Access-Control-Allow-Origin: *`. If not, download the image to a Blob first or use a proxy.
+3. **Data URL**: Remember that the web result is a `data:` URL. You can use it directly in `<Image source={{ uri: result }} />`.
 
 ### Native Module Not Found?
 

package/lib/ImageProcessing.web.d.ts

@@ -1,7 +1,6 @@
 /**
- * Web implementation using @imgly/background-removal via Inline Web Worker.
- * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads library from CDN to bypass Metro bundler issues.
+ * Web implementation using @imgly/background-removal via Script Tag.
+ * Requires the script to be added manually to index.html.
  */
 export type OutputFormat = 'PNG' | 'WEBP';
 export interface RemoveBgImageOptions {

package/lib/ImageProcessing.web.js

@@ -1,128 +1,38 @@
 /**
- * Web implementation using @imgly/background-removal via Inline Web Worker.
- * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads library from CDN to bypass Metro bundler issues.
+ * Web implementation using @imgly/background-removal via Script Tag.
+ * Requires the script to be added manually to index.html.
  */
-// ==========================================
-// INLINE WORKER CODE (Run in background)
-// ==========================================
-const WORKER_CODE = `
-  let removeBackground = null;
-
-  self.onmessage = async (e) => {
-    const { id, type, payload } = e.data;
-
-    try {
-      if (type === 'init') {
-        if (typeof self.imglyBackgroundRemoval === 'undefined' || !removeBackground) {
-          // Use importScripts (Classic Worker) - most robust for Blob URLs
-          importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
-          
-          if (!self.imglyBackgroundRemoval) {
-             throw new Error('imglyBackgroundRemoval not loaded via importScripts'); 
-          }
-          
-          removeBackground = self.imglyBackgroundRemoval.removeBackground;
-        }
-        self.postMessage({ id, type: 'success', payload: true });
-        return;
-      }
-
-      if (type === 'removeBg') {
-        const { uri, config } = payload;
-        
-        if (!removeBackground) {
-           importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
-           removeBackground = self.imglyBackgroundRemoval.removeBackground;
-        }
-
-        // Run Inference
-        // CRITICAL: Must point publicPath to CDN so it finds WASM/Models
-        // otherwise it tries to load from blob: URL
-        const blob = await removeBackground(uri, {
-           publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
-           progress: (key, current, total) => {
-              const p = current / total;
-              self.postMessage({ id, type: 'progress', payload: { progress: p } });
-           },
-           ...config
-        });
-
-        // Convert blob to DataURL for return
-        const reader = new FileReader();
-        reader.onloadend = () => {
-           self.postMessage({ id, type: 'success', payload: reader.result });
-        };
-        reader.readAsDataURL(blob);
-      }
-    } catch (err) {
-      self.postMessage({ id, type: 'error', payload: err.message || JSON.stringify(err) });
-    }
-  };
-`;
-// ==========================================
-// MAIN THREAD BRIDGE
-// ==========================================
-let worker = null;
-const pendingMessages = new Map();
-function getWorker() {
-    if (!worker) {
-        const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
-        const url = URL.createObjectURL(blob);
-        worker = new Worker(url);
-        worker.onmessage = (e) => {
-            const { id, type, payload } = e.data;
-            const deferred = pendingMessages.get(id);
-            if (!deferred)
-                return;
-            if (type === 'progress') {
-                if (deferred.onProgress && payload.progress) {
-                    deferred.onProgress(payload.progress * 100);
-                }
-            }
-            else if (type === 'success') {
-                deferred.resolve(payload);
-                pendingMessages.delete(id);
-            }
-            else if (type === 'error') {
-                deferred.reject(new Error(payload));
-                pendingMessages.delete(id);
-            }
-        };
-    }
-    return worker;
-}
-function sendToWorker(type, payload, onProgress) {
-    return new Promise((resolve, reject) => {
-        const id = Math.random().toString(36).substring(7);
-        pendingMessages.set(id, { resolve, reject, onProgress });
-        getWorker().postMessage({ id, type, payload });
-    });
-}
-// Initialize
-let initPromise = null;
-async function ensureInit() {
-    if (!initPromise) {
-        initPromise = sendToWorker('init', {});
-    }
-    return initPromise;
-}
 export async function removeBgImage(uri, options = {}) {
     const { onProgress, debug = false } = options;
+    // Safety check
+    if (typeof imglyBackgroundRemoval === 'undefined') {
+        throw new Error('[rn-remove-image-bg] Library not found. Please add the following script to your web index.html:\n' +
+            '<script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>');
+    }
     if (debug)
         console.log('[rmbg] Starting...');
     onProgress?.(1);
-    // Ensure worker is ready
-    await ensureInit();
     // Config for imgly
     const config = {
         debug: debug,
-        // We can pass other options supported by imgly if needed
-        // device: 'gpu' is auto-detected usually
+        // Point publicPath to CDN for assets (wasm/models)
+        // This is crucial for UMD build to find its dependencies on the CDN
+        publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
+        progress: (_key, current, total) => {
+            if (onProgress && total > 0) {
+                onProgress((current / total) * 100);
+            }
+        }
     };
-    const result = await sendToWorker('removeBg', { uri, config }, onProgress);
+    const blob = await imglyBackgroundRemoval.removeBackground(uri, config);
     onProgress?.(100);
-    return result;
+    // Convert blob to DataURL
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+    });
 }
 export const removeBackground = removeBgImage;
 // ==========================================
@@ -192,11 +102,10 @@ export async function generateThumbhash(imageUri, options = {}) {
     }
 }
 export async function clearCache() {
-    if (worker) {
-        worker.terminate();
-        worker = null;
+    // @ts-ignore
+    if (typeof imglyBackgroundRemoval !== 'undefined' && imglyBackgroundRemoval.preload) {
+        // no explicit clear cache in uMD version usually
     }
-    initPromise = null;
 }
 export function getCacheSize() { return 0; }
 export async function onLowMemory() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.19",
+  "version": "0.0.22",
   "description": "rn-remove-image-bg",
   "homepage": "https://github.com/a-eid/rn-remove-image-bg",
   "main": "lib/index",

package/src/ImageProcessing.web.ts

@@ -1,7 +1,6 @@
 /**
- * Web implementation using @imgly/background-removal via Inline Web Worker.
- * Moves all heavy processing to a background thread to prevent UI freezing.
- * Loads library from CDN to bypass Metro bundler issues.
+ * Web implementation using @imgly/background-removal via Script Tag.
+ * Requires the script to be added manually to index.html.
  */
 
 export type OutputFormat = 'PNG' | 'WEBP';
@@ -13,115 +12,9 @@ export interface RemoveBgImageOptions {
   debug?: boolean;
 }
 
-// ==========================================
-// INLINE WORKER CODE (Run in background)
-// ==========================================
-const WORKER_CODE = `
-  let removeBackground = null;
-
-  self.onmessage = async (e) => {
-    const { id, type, payload } = e.data;
-
-    try {
-      if (type === 'init') {
-        if (typeof self.imglyBackgroundRemoval === 'undefined' || !removeBackground) {
-          // Use importScripts (Classic Worker) - most robust for Blob URLs
-          importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
-          
-          if (!self.imglyBackgroundRemoval) {
-             throw new Error('imglyBackgroundRemoval not loaded via importScripts'); 
-          }
-          
-          removeBackground = self.imglyBackgroundRemoval.removeBackground;
-        }
-        self.postMessage({ id, type: 'success', payload: true });
-        return;
-      }
-
-      if (type === 'removeBg') {
-        const { uri, config } = payload;
-        
-        if (!removeBackground) {
-           importScripts('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js');
-           removeBackground = self.imglyBackgroundRemoval.removeBackground;
-        }
-
-        // Run Inference
-        // CRITICAL: Must point publicPath to CDN so it finds WASM/Models
-        // otherwise it tries to load from blob: URL
-        const blob = await removeBackground(uri, {
-           publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/',
-           progress: (key, current, total) => {
-              const p = current / total;
-              self.postMessage({ id, type: 'progress', payload: { progress: p } });
-           },
-           ...config
-        });
-
-        // Convert blob to DataURL for return
-        const reader = new FileReader();
-        reader.onloadend = () => {
-           self.postMessage({ id, type: 'success', payload: reader.result });
-        };
-        reader.readAsDataURL(blob);
-      }
-    } catch (err) {
-      self.postMessage({ id, type: 'error', payload: err.message || JSON.stringify(err) });
-    }
-  };
-`;
-
-// ==========================================
-// MAIN THREAD BRIDGE
-// ==========================================
-
-let worker: Worker | null = null;
-const pendingMessages = new Map<string, { resolve: (v: any) => void; reject: (e: any) => void; onProgress?: (p: number) => void }>();
-
-function getWorker() {
-  if (!worker) {
-    const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });
-    const url = URL.createObjectURL(blob);
-    worker = new Worker(url);
-    
-    worker.onmessage = (e) => {
-      const { id, type, payload } = e.data;
-      const deferred = pendingMessages.get(id);
-      
-      if (!deferred) return;
-
-      if (type === 'progress') {
-        if (deferred.onProgress && payload.progress) {
-             deferred.onProgress(payload.progress * 100); 
-        }
-      } else if (type === 'success') {
-        deferred.resolve(payload);
-        pendingMessages.delete(id);
-      } else if (type === 'error') {
-        deferred.reject(new Error(payload));
-        pendingMessages.delete(id);
-      }
-    };
-  }
-  return worker;
-}
-
-function sendToWorker(type: string, payload: any, onProgress?: (p: number) => void): Promise<any> {
-  return new Promise((resolve, reject) => {
-    const id = Math.random().toString(36).substring(7);
-    pendingMessages.set(id, { resolve, reject, onProgress });
-    getWorker().postMessage({ id, type, payload });
-  });
-}
-
-// Initialize
-let initPromise: Promise<void> | null = null;
-async function ensureInit() {
-  if (!initPromise) {
-    initPromise = sendToWorker('init', {});
-  }
-  return initPromise;
-}
+// Check for global variable
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const imglyBackgroundRemoval: any;
 
 export async function removeBgImage(
   uri: string,
@@ -129,23 +22,40 @@ export async function removeBgImage(
 ): Promise<string> {
     const { onProgress, debug = false } = options;
     
+    // Safety check
+    if (typeof imglyBackgroundRemoval === 'undefined') {
+       throw new Error(
+         '[rn-remove-image-bg] Library not found. Please add the following script to your web index.html:\n' +
+         '<script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>'
+       );
+    }
+    
     if (debug) console.log('[rmbg] Starting...');
     onProgress?.(1); 
     
-    // Ensure worker is ready
-    await ensureInit();
-    
     // Config for imgly
     const config = {
        debug: debug,
-       // We can pass other options supported by imgly if needed
-       // device: 'gpu' is auto-detected usually
+       // Point publicPath to CDN for assets (wasm/models)
+       // This is crucial for UMD build to find its dependencies on the CDN
+       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);
+          }
+       }
     };
     
-    const result = await sendToWorker('removeBg', { uri, config }, onProgress);
-    
+    const blob = await imglyBackgroundRemoval.removeBackground(uri, config);
     onProgress?.(100);
-    return result as string;
+    
+    // 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;
@@ -250,11 +160,10 @@ export async function generateThumbhash(
 }
 
 export async function clearCache(): Promise<void> {
-  if (worker) {
-     worker.terminate();
-     worker = null;
+  // @ts-ignore
+  if (typeof imglyBackgroundRemoval !== 'undefined' && imglyBackgroundRemoval.preload) {
+      // no explicit clear cache in uMD version usually
   }
-  initPromise = null;
 }
 
 export function getCacheSize(): number { return 0; }