Package Exports

@imgly/background-removal
@imgly/background-removal/dist/browser.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@imgly/background-removal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Background Removal in the Web Browser

Getting Started

npm install @imgly/background-removal

yarn add @imgly/background-removal

Usage

import imgly_bg_remove from "@imgly/background-removal"

let image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string = ...;

imgly_bg_remove(image_src).then((blob: Blob) => {
  // The rsult is a blob encoded as PNG. It can be converted to an URL to be used as HTMLImage.src
  const url = URL.createObjectURL(blob);
})

Note: On the first run the wasm and onnx model files are fetched. This might, depending on the bandwith, take time. Therefore, the first run takes proportional longer than each consecutive run. Also, all files are cached by the browser and an additional model cache.

Enhanced Configuration

Download Progress Monitoring

On the first run, the necessery data will be fetched and stored in the browser cache. Since the download might take some time, you have to option to tap into the download progress

let config: Config = {
  progress: (key, current, total) => {
    console.log(`Downloading ${key}: ${(current} of ${total}`);
  }
}

Custom Asset Serving

Currently, the wasm and onnx neural networks are served via unpkg. For production use, we advise to host them yourself. Therefore, copy all .wasm and .onnx files to your public path $PUBLIC_PATH and reconfigure the library

cp node_modules/@imgly/background-removal/dist/*.wasm $PUBLIC_PATH
cp node_modules/@imgly/background-removal/dist/*.onnx $PUBLIC_PATH

import imgly_bg_remove, {Config} from "@imgly/background-removal"

const public_path = "https://example.com/assets/" ; // the path assets are served from

let config: Config =  {
  publicPath: public_path, // path to the wasm files
};

let image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string = ...;

imgly_bg_remove(image_src, config).then((blob: Blob) => {
  // result is a blob encoded as PNG.
  // It can be converted to an URL to be used as HTMLImage.src
  const url = URL.createObjectURL(blob);
})

Debug Outputs

Enable debug outputs and logging to the console

let config: Config =  {
  debug: true
};

CORS

If you are running into CORS issues you might want to pass additional parameters to the fetch function via

let config: Config =  {
  fetchArgs: {
    mode : 'no-cors'
  }
};

fetchArgs are passed as second parameters to the fetch function as described in https://duckduckgo.com/?q=fetch+msdn&atb=v374-1&ia=web.