rn-remove-image-bg 0.0.13 → 0.0.15

package/lib/ImageProcessing.web.d.ts

@@ -1,6 +1,7 @@
 /**
  * Web implementation using @huggingface/transformers
  * Uses BRIAAI RMBG-1.4 model for background removal.
+ * Loads from CDN to bypass Metro bundler issues.
  */
 export type OutputFormat = 'PNG' | 'WEBP';
 export interface RemoveBgImageOptions {
@@ -24,8 +25,8 @@ export interface CompressImageOptions {
 export interface GenerateThumbhashOptions {
     size?: number;
 }
-export declare function compressImage(uri: string, _options?: CompressImageOptions): Promise<string>;
-export declare function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string>;
+export declare function compressImage(uri: string, options?: CompressImageOptions): Promise<string>;
+export declare function generateThumbhash(imageUri: string, options?: GenerateThumbhashOptions): Promise<string>;
 export declare function clearCache(): Promise<void>;
 export declare function getCacheSize(): number;
 export declare function onLowMemory(): Promise<number>;

package/lib/ImageProcessing.web.js

@@ -1,10 +1,22 @@
 /**
  * Web implementation using @huggingface/transformers
  * Uses BRIAAI RMBG-1.4 model for background removal.
+ * Loads from CDN to bypass Metro bundler issues.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let pipeline = null;
 let loadPromise = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let transformersModule = null;
+// Load transformers.js from CDN to avoid Metro bundling issues
+async function loadTransformers() {
+    if (transformersModule)
+        return transformersModule;
+    // Use dynamic import from CDN
+    const cdnUrl = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
+    transformersModule = await import(/* webpackIgnore: true */ cdnUrl);
+    return transformersModule;
+}
 async function ensureLoaded(onProgress, debug) {
     if (pipeline)
         return pipeline;
@@ -15,7 +27,7 @@ async function ensureLoaded(onProgress, debug) {
     loadPromise = (async () => {
         if (debug)
             console.log('[rmbg] Loading model...');
-        const { pipeline: createPipeline, env } = await import('@huggingface/transformers');
+        const { pipeline: createPipeline, env } = await loadTransformers();
         env.allowLocalModels = false;
         env.useBrowserCache = true;
         onProgress?.(10);
@@ -48,33 +60,155 @@ export async function removeBgImage(uri, options = {}) {
     const result = Array.isArray(results) ? results[0] : results;
     if (!result?.mask)
         throw new Error('No mask returned');
-    // Convert to data URL
-    const dataUrl = typeof result.mask === 'string'
-        ? result.mask
-        : toDataUrl(result.mask, format, quality);
+    // Apply mask to original image
+    const original = await loadImage(uri);
+    const dataUrl = await applyMask(original, result.mask, format, quality);
     if (debug)
         console.log('[rmbg] Done');
     onProgress?.(100);
     return dataUrl;
 }
-function toDataUrl(mask, format, quality) {
+async function applyMask(image, mask, format, quality) {
     const canvas = document.createElement('canvas');
-    canvas.width = mask.width;
-    canvas.height = mask.height;
+    // Use original image dimensions
+    canvas.width = image.width;
+    canvas.height = image.height;
     const ctx = canvas.getContext('2d');
-    const imageData = ctx.createImageData(mask.width, mask.height);
-    imageData.data.set(mask.data);
+    if (!ctx)
+        throw new Error('Could not get canvas context');
+    // Draw original image
+    ctx.drawImage(image, 0, 0);
+    // Get image data to manipulate pixels
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const pixelData = imageData.data;
+    // Process mask
+    let maskData;
+    let maskWidth;
+    let maskHeight;
+    if (typeof mask === 'string') {
+        // If mask is a URL, load it
+        const maskImg = await loadImage(mask);
+        const maskCanvas = document.createElement('canvas');
+        maskCanvas.width = canvas.width;
+        maskCanvas.height = canvas.height;
+        const maskCtx = maskCanvas.getContext('2d');
+        if (!maskCtx)
+            throw new Error('Could not get mask context');
+        // Draw and resize mask to match image
+        maskCtx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
+        const maskImageData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
+        maskData = maskImageData.data;
+        maskWidth = canvas.width;
+        maskHeight = canvas.height;
+    }
+    else {
+        // @ts-ignore - Transformers.js types are loose
+        maskData = mask.data;
+        maskWidth = mask.width;
+        maskHeight = mask.height;
+    }
+    // Helper to get alpha value from mask data
+    const getAlpha = (index, data, width, height, targetWidth, targetHeight) => {
+        // If dimensions match
+        if (width === targetWidth && height === targetHeight) {
+            // Check if mask is single channel (grayscale) or RGBA
+            if (data.length === width * height) {
+                return data[index / 4];
+            }
+            else if (data.length === width * height * 3) {
+                return data[Math.floor(index / 4) * 3];
+            }
+            else {
+                return data[index]; // Assume RGBA red channel or alpha channel usage
+            }
+        }
+        // Nearest neighbor resizing
+        const x = (index / 4) % targetWidth;
+        const y = Math.floor((index / 4) / targetWidth);
+        const maskX = Math.floor(x * (width / targetWidth));
+        const maskY = Math.floor(y * (height / targetHeight));
+        const maskIndex = (maskY * width + maskX);
+        if (data.length === width * height) {
+            return data[maskIndex];
+        }
+        else if (data.length === width * height * 3) {
+            return data[maskIndex * 3];
+        }
+        else {
+            return data[maskIndex * 4];
+        }
+    };
+    // Apply alpha
+    for (let i = 0; i < pixelData.length; i += 4) {
+        const alpha = getAlpha(i, maskData, maskWidth, maskHeight, canvas.width, canvas.height) ?? 255;
+        pixelData[i + 3] = alpha;
+    }
     ctx.putImageData(imageData, 0, 0);
     return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
 }
 export const removeBackground = removeBgImage;
-export async function compressImage(uri, _options) {
-    console.warn('[rmbg] compressImage not implemented on web, returning original');
-    return uri;
+// Helper to load image
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
 }
-export async function generateThumbhash(_uri, _options) {
-    console.warn('[rmbg] generateThumbhash not implemented on web');
-    return '';
+export async function compressImage(uri, options = {}) {
+    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) => ((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;
+    }
+}
+export async function generateThumbhash(imageUri, options = {}) {
+    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-expect-error CDN import works at runtime
+        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 '';
+    }
 }
 export async function clearCache() {
     pipeline = null;

package/package.json

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

package/src/ImageProcessing.web.ts

@@ -1,6 +1,7 @@
 /**
  * Web implementation using @huggingface/transformers
  * Uses BRIAAI RMBG-1.4 model for background removal.
+ * Loads from CDN to bypass Metro bundler issues.
  */
 
 export type OutputFormat = 'PNG' | 'WEBP';
@@ -15,6 +16,18 @@ export interface RemoveBgImageOptions {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let pipeline: any = null;
 let loadPromise: Promise<void> | null = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let transformersModule: any = null;
+
+// Load transformers.js from CDN to avoid Metro bundling issues
+async function loadTransformers() {
+  if (transformersModule) return transformersModule;
+  
+  // Use dynamic import from CDN
+  const cdnUrl = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3';
+  transformersModule = await import(/* webpackIgnore: true */ cdnUrl);
+  return transformersModule;
+}
 
 async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
   if (pipeline) return pipeline;
@@ -27,7 +40,7 @@ async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
   loadPromise = (async () => {
     if (debug) console.log('[rmbg] Loading model...');
     
-    const { pipeline: createPipeline, env } = await import('@huggingface/transformers');
+    const { pipeline: createPipeline, env } = await loadTransformers();
     
     env.allowLocalModels = false;
     env.useBrowserCache = true;
@@ -36,7 +49,7 @@ async function ensureLoaded(onProgress?: (p: number) => void, debug?: boolean) {
     
     pipeline = await createPipeline('image-segmentation', 'briaai/RMBG-1.4', {
       dtype: 'q8',
-      progress_callback: (info) => {
+      progress_callback: (info: { progress?: number }) => {
         if (onProgress && 'progress' in info && typeof info.progress === 'number') {
           onProgress(Math.min(10 + (info.progress / 100) * 50, 60));
         }
@@ -71,10 +84,9 @@ export async function removeBgImage(
   const result = Array.isArray(results) ? results[0] : results;
   if (!result?.mask) throw new Error('No mask returned');
 
-  // Convert to data URL
-  const dataUrl = typeof result.mask === 'string' 
-    ? result.mask 
-    : toDataUrl(result.mask, format, quality);
+  // Apply mask to original image
+  const original = await loadImage(uri);
+  const dataUrl = await applyMask(original, result.mask, format, quality);
 
   if (debug) console.log('[rmbg] Done');
   onProgress?.(100);
@@ -82,24 +94,107 @@ export async function removeBgImage(
   return dataUrl;
 }
 
-function toDataUrl(
-  mask: { width: number; height: number; data: Uint8Array | Uint8ClampedArray },
+async function applyMask(
+  image: HTMLImageElement,
+  mask: { width: number; height: number; data: Uint8Array | Uint8ClampedArray } | string,
   format: OutputFormat,
   quality: number
-): string {
+): Promise<string> {
   const canvas = document.createElement('canvas');
-  canvas.width = mask.width;
-  canvas.height = mask.height;
-  const ctx = canvas.getContext('2d')!;
-  const imageData = ctx.createImageData(mask.width, mask.height);
-  imageData.data.set(mask.data);
+  // Use original image dimensions
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Could not get canvas context');
+
+  // Draw original image
+  ctx.drawImage(image, 0, 0);
+
+  // Get image data to manipulate pixels
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const pixelData = imageData.data;
+
+  // Process mask
+  let maskData: Uint8ClampedArray | Uint8Array;
+  let maskWidth: number;
+  let maskHeight: number;
+
+  if (typeof mask === 'string') {
+    // If mask is a URL, load it
+    const maskImg = await loadImage(mask);
+    const maskCanvas = document.createElement('canvas');
+    maskCanvas.width = canvas.width;
+    maskCanvas.height = canvas.height;
+    const maskCtx = maskCanvas.getContext('2d');
+    if (!maskCtx) throw new Error('Could not get mask context');
+    
+    // Draw and resize mask to match image
+    maskCtx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
+    const maskImageData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
+    maskData = maskImageData.data;
+    maskWidth = canvas.width;
+    maskHeight = canvas.height;
+  } else {
+    // @ts-ignore - Transformers.js types are loose
+    maskData = mask.data;
+    maskWidth = mask.width;
+    maskHeight = mask.height;
+  }
+
+  // Helper to get alpha value from mask data
+  const getAlpha = (index: number, data: Uint8ClampedArray | Uint8Array, width: number, height: number, targetWidth: number, targetHeight: number) => {
+    // If dimensions match
+    if (width === targetWidth && height === targetHeight) {
+       // Check if mask is single channel (grayscale) or RGBA
+       if (data.length === width * height) {
+         return data[index / 4];
+       } else if (data.length === width * height * 3) {
+         return data[Math.floor(index / 4) * 3];
+       } else {
+         return data[index]; // Assume RGBA red channel or alpha channel usage
+       }
+    }
+    
+    // Nearest neighbor resizing
+    const x = (index / 4) % targetWidth;
+    const y = Math.floor((index / 4) / targetWidth);
+    
+    const maskX = Math.floor(x * (width / targetWidth));
+    const maskY = Math.floor(y * (height / targetHeight));
+    const maskIndex = (maskY * width + maskX);
+
+    if (data.length === width * height) {
+       return data[maskIndex];
+    } else if (data.length === width * height * 3) {
+       return data[maskIndex * 3];
+    } else {
+       return data[maskIndex * 4];
+    }
+  };
+
+  // Apply alpha
+  for (let i = 0; i < pixelData.length; i += 4) {
+    const alpha = getAlpha(i, maskData, maskWidth, maskHeight, canvas.width, canvas.height) ?? 255;
+    pixelData[i + 3] = alpha;
+  }
+
   ctx.putImageData(imageData, 0, 0);
   return canvas.toDataURL(format === 'WEBP' ? 'image/webp' : 'image/png', quality / 100);
 }
 
 export const removeBackground = removeBgImage;
 
-// Stub exports for API compatibility with native
+// 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;
+  });
+}
+
 export interface CompressImageOptions {
   maxSizeKB?: number;
   width?: number;
@@ -112,14 +207,76 @@ export interface GenerateThumbhashOptions {
   size?: number;
 }
 
-export async function compressImage(uri: string, _options?: CompressImageOptions): Promise<string> {
-  console.warn('[rmbg] compressImage not implemented on web, returning original');
-  return uri;
+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;
+  }
 }
 
-export async function generateThumbhash(_uri: string, _options?: GenerateThumbhashOptions): Promise<string> {
-  console.warn('[rmbg] generateThumbhash not implemented on web');
-  return '';
+export async function generateThumbhash(
+  imageUri: 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-expect-error CDN import works at runtime
+    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 '';
+  }
 }
 
 export async function clearCache(): Promise<void> {