rn-remove-image-bg 0.0.22 → 0.0.23

package/README.md

@@ -326,12 +326,16 @@ try {
 
 ### Web
 
-1. **Add the Script**: You must add the `@imgly/background-removal` script to your web `index.html`:
+1. **Add the Script**: You must add the `@imgly/background-removal` setup to your web `index.html`. 
+   Since the library is distributed as an ES Module, you need to import it and assign it to the window object:
    ```html
-   <script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>
+   <script type="module">
+     import { removeBackground } from "https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/+esm";
+     window.imglyRemoveBackground = removeBackground;
+   </script>
    ```
 
-2. **Usage**: The library will automatically detect the global `imglyBackgroundRemoval` object.
+2. **Usage**: The library will automatically detect the global `imglyRemoveBackground` function.
 
 - **Technology**: [@imgly/background-removal](https://github.com/imgly/background-removal-js) running in a Web Worker (managed by the library).
 - **Performance**: Zero UI blocking.

package/lib/ImageProcessing.web.js

@@ -5,9 +5,22 @@
 export async function removeBgImage(uri, options = {}) {
     const { onProgress, debug = false } = options;
     // Safety check
-    if (typeof imglyBackgroundRemoval === 'undefined') {
+    // @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;
+        }
+    }
+    // @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 src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>');
+            '<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>');
     }
     if (debug)
         console.log('[rmbg] Starting...');
@@ -16,7 +29,6 @@ export async function removeBgImage(uri, options = {}) {
     const config = {
         debug: debug,
         // 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) {
@@ -24,7 +36,8 @@ export async function removeBgImage(uri, options = {}) {
             }
         }
     };
-    const blob = await imglyBackgroundRemoval.removeBackground(uri, config);
+    // @ts-ignore
+    const blob = await window.imglyRemoveBackground(uri, config);
     onProgress?.(100);
     // Convert blob to DataURL
     return new Promise((resolve, reject) => {
@@ -102,10 +115,7 @@ export async function generateThumbhash(imageUri, options = {}) {
     }
 }
 export async function clearCache() {
-    // @ts-ignore
-    if (typeof imglyBackgroundRemoval !== 'undefined' && imglyBackgroundRemoval.preload) {
-        // no explicit clear cache in uMD version usually
-    }
+    // Caching is handled internally by the library
 }
 export function getCacheSize() { return 0; }
 export async function onLowMemory() {

package/package.json

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

package/src/ImageProcessing.web.ts

@@ -14,7 +14,7 @@ export interface RemoveBgImageOptions {
 
 // Check for global variable
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const imglyBackgroundRemoval: any;
+declare const imglyRemoveBackground: any;
 
 export async function removeBgImage(
   uri: string,
@@ -23,10 +23,24 @@ export async function removeBgImage(
     const { onProgress, debug = false } = options;
     
     // Safety check
-    if (typeof imglyBackgroundRemoval === 'undefined') {
+    // @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;
+       }
+    }
+
+    // @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 src="https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.7.0/dist/imgly-background-removal.min.js"></script>'
+         '<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>'
        );
     }
     
@@ -37,7 +51,6 @@ export async function removeBgImage(
     const config = {
        debug: debug,
        // 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) {
@@ -46,7 +59,8 @@ export async function removeBgImage(
        }
     };
     
-    const blob = await imglyBackgroundRemoval.removeBackground(uri, config);
+    // @ts-ignore
+    const blob = await window.imglyRemoveBackground(uri, config);
     onProgress?.(100);
     
     // Convert blob to DataURL
@@ -160,10 +174,7 @@ export async function generateThumbhash(
 }
 
 export async function clearCache(): Promise<void> {
-  // @ts-ignore
-  if (typeof imglyBackgroundRemoval !== 'undefined' && imglyBackgroundRemoval.preload) {
-      // no explicit clear cache in uMD version usually
-  }
+  // Caching is handled internally by the library
 }
 
 export function getCacheSize(): number { return 0; }