rn-remove-image-bg 0.0.18 → 0.0.20

package/README.md

@@ -325,15 +325,18 @@ try {
 > **First-time Use**: On Android, the ML Kit model downloads automatically on first use. The library waits for the download to complete (up to ~15 seconds with retries) before processing. Subsequent calls are instant.
 
 ### 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
-
-> **Return Value Difference**: Web returns data URLs instead of file paths. Both work with `<Image>` components.
-
-If you don't need web support, you can tree-shake the `@imgly/background-removal` dependency.
+- **Technology**: [@imgly/background-removal](https://github.com/imgly/background-removal-js) running in a **Web Worker**.
+- **Performance**: Zero UI blocking. All processing happens in a background thread.
+- **Implementation**: 
+  - Uses an **Inline Worker** architecture.
+  - Loads the library from CDN (`jsdelivr`) automatically on first use.
+  - **No bundler configuration required**. Works with Metro, Webpack, Vite, etc. out of the box.
+- **Requirements**:
+  - **Internet Connection**: Required for the first run to download the library and assets (~10MB) from CDN.
+  - **CORS**: Images loaded from external URLs must be CORS-enabled (`Access-Control-Allow-Origin: *`).
+- **Output**: Data URL (`data:image/png;base64,...`) or WEBP Blob.
+
+> **Note on Local Development**: If you see CSP errors, ensure your development server allows loading scripts from `cdn.jsdelivr.net`.
 
 ---
 
@@ -416,10 +419,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.js

@@ -14,15 +14,15 @@ const WORKER_CODE = `
 
     try {
       if (type === 'init') {
-        if (!removeBackground) {
-          // Dynamic import from CDN
-          // Using v1.3.0 which is stable
-          const module = await import('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.3.0/+esm');
-          removeBackground = module.removeBackground;
+        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'); 
+          }
           
-          // Preload/Init logic could go here if exposed, but imgly inits on first run usually
-          // Unless we want to preload the wasm.
-          // self.postMessage({ id, type: 'progress', payload: { progress: 0.1 } });
+          removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
         self.postMessage({ id, type: 'success', payload: true });
         return;
@@ -32,15 +32,16 @@ const WORKER_CODE = `
         const { uri, config } = payload;
         
         if (!removeBackground) {
-           const module = await import('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.3.0/+esm');
-           removeBackground = module.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
-        // imgly config: { progress: (key, current, total) => ... }
+        // 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) => {
-              // Map progress roughly
               const p = current / total;
               self.postMessage({ id, type: 'progress', payload: { progress: p } });
            },

package/package.json

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

package/src/ImageProcessing.web.ts

@@ -24,15 +24,15 @@ const WORKER_CODE = `
 
     try {
       if (type === 'init') {
-        if (!removeBackground) {
-          // Dynamic import from CDN
-          // Using v1.3.0 which is stable
-          const module = await import('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.3.0/+esm');
-          removeBackground = module.removeBackground;
+        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'); 
+          }
           
-          // Preload/Init logic could go here if exposed, but imgly inits on first run usually
-          // Unless we want to preload the wasm.
-          // self.postMessage({ id, type: 'progress', payload: { progress: 0.1 } });
+          removeBackground = self.imglyBackgroundRemoval.removeBackground;
         }
         self.postMessage({ id, type: 'success', payload: true });
         return;
@@ -42,15 +42,16 @@ const WORKER_CODE = `
         const { uri, config } = payload;
         
         if (!removeBackground) {
-           const module = await import('https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.3.0/+esm');
-           removeBackground = module.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
-        // imgly config: { progress: (key, current, total) => ... }
+        // 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) => {
-              // Map progress roughly
               const p = current / total;
               self.postMessage({ id, type: 'progress', payload: { progress: p } });
            },