rn-remove-image-bg 0.0.14 → 0.0.15

package/lib/ImageProcessing.web.js

@@ -60,22 +60,89 @@ 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);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-remove-image-bg",
-  "version": "0.0.14",
+  "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

@@ -84,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);
@@ -95,17 +94,90 @@ 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);
 }