rn-remove-image-bg 0.0.23 → 0.0.25

package/src/web/utils/CompressImage.ts

@@ -0,0 +1,38 @@
+import type { CompressImageOptions } from '../core/types';
+import { loadImage } from './uriHelper';
+
+export async function compressImage(uri: string, options: CompressImageOptions): Promise<string> {
+  const img = await loadImage(uri);
+  
+  let { width, height, quality = 0.8, format = 'jpeg' } = options;
+  
+  // Default dimensions to original if not specified
+  if (!width) width = img.naturalWidth;
+  if (!height) height = img.naturalHeight;
+  
+  // Calculate aspect ratio if one dimension is missing (though simpler to just use natural if both default)
+  const ratio = img.naturalWidth / img.naturalHeight;
+  if (options.width && !options.height) height = Math.round(width / ratio);
+  if (options.height && !options.width) width = Math.round(height * ratio);
+
+  // Normalize format
+  const mimeType = format === 'png' ? 'image/png' : format === 'webp' ? 'image/webp' : 'image/jpeg';
+  
+  // Create canvas
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  
+  if (!ctx) {
+    throw new Error('Canvas 2D context not available');
+  }
+
+  // Draw image
+  ctx.drawImage(img, 0, 0, width, height);
+
+  // Export
+  // Note: quality (0-1) is ignored for PNG
+  const dataUrl = canvas.toDataURL(mimeType, quality);
+  return dataUrl;
+}

package/src/web/utils/ThumbhashGenerator.ts

@@ -0,0 +1,40 @@
+import * as ThumbHash from 'thumbhash';
+import { loadImage } from './uriHelper';
+
+export async function generateThumbhash(uri: string): Promise<string> {
+  const img = await loadImage(uri);
+
+  // Thumbhash works best with images < 100x100
+  const maxSize = 100;
+  let width = img.naturalWidth;
+  let height = img.naturalHeight;
+  
+  const scale = Math.min(maxSize / width, maxSize / height);
+  if (scale < 1) {
+    width = Math.round(width * scale);
+    height = Math.round(height * scale);
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  
+  if (!ctx) {
+    throw new Error('Canvas 2D context not available');
+  }
+
+  ctx.drawImage(img, 0, 0, width, height);
+  
+  // Get RGBA data
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const rgba = imageData.data;
+  
+  // Generate binary hash
+  const hash = ThumbHash.rgbaToThumbHash(width, height, rgba);
+  
+  // Convert to base64 using browser API
+  // hash is Uint8Array, spread into String.fromCharCode is safe for small thumbhashes (~30 bytes)
+  const binary = String.fromCharCode(...hash);
+  return window.btoa(binary);
+}

package/src/web/utils/formatConverter.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a Blob to a Data URL string (base64)
+ */
+export function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject(new Error('Failed to convert blob to data URL'));
+      }
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}

package/src/web/utils/uriHelper.ts

@@ -0,0 +1,51 @@
+/**
+ * Helper to normalize React Native URIs for Web consumption.
+ * Handles file://, asset://, and data: URIs.
+ */
+export async function normalizeUri(uri: string): Promise<string> {
+  if (!uri) return '';
+
+  // Handle data URIs (return as is)
+  if (uri.startsWith('data:')) {
+    return uri;
+  }
+
+  // Handle http/https (return as is)
+  if (uri.startsWith('http')) {
+    return uri;
+  }
+
+  // Handle Expo asset:// URIs (convert to http relative path if needed, or pass through)
+  // In Expo Web, bundled assets are usually served from /assets/
+  if (uri.startsWith('asset://')) {
+     // NOTE: complex asset:// handling might require expo-asset, 
+     // but often on web the uri passed is already resolved or a relative path.
+     // For now, we return it. If it fails, we might need 'expo-asset' module.
+     return uri.replace('asset://', '/assets/'); 
+  }
+
+  // Handle file:// URIs
+  // On web, file:// is blocked for security unless it's a blob url created by the app
+  if (uri.startsWith('file://')) {
+    // If it's a local file picked by user, it might be a blob: reference in disguise or invalid.
+    // We strip the protocol for relative paths check.
+    return uri; 
+  }
+
+  // Relative paths
+  return uri;
+}
+
+/**
+ * Loads an image from a URI into an HTMLImageElement for processing.
+ * Handles CORS cross-origin issues.
+ */
+export function loadImage(uri: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous'; // Enable CORS
+    img.onload = () => resolve(img);
+    img.onerror = (e) => reject(new Error(`Failed to load image at ${uri}: ${String(e)}`));
+    img.src = uri;
+  });
+}