Search code examples
web-applicationsphotoshopcomposite

How should I implement online easy "photoshopping" to remove background for uploaded images?

We are making an app that includes a digital gallery which display photos and text.

The user usually uploads a photo with a background, we would like to mask out the background, with the foreground object remaining composited with our custom background. The object is mostly dark and the shape is simple, so if it is photographed on a white background the outline is clearly defined. We would like to provide very easy to use tools to help the user remove the background, which provides similar features of photoshop, but w/o the complexness of it. We also need to let the user resize the object to the same size.

Some ideas,

  1. A magic wand tool
  2. A line tool that creates closed bezier lines
  3. Some predefined shapes as masks.

The tool could be made with flash/air/html5.

Solution

  • If the object is always darker than the background, you should use a simple threshold method with one parameter to set it: (Everything brighter than threshold is BG, the rest is FG). If that is not the case, have a look at watershed algorithms. I think the free OpenCV library (http://opencv.willowgarage.com/wiki/) from Intel includes an implementation. These also need very few parameters: seeding points to start the segmentation, so the user could just click on the foreground object and then again set interactively set a threshold until the whole object is selected. This is mostly like the "Magic Wand". If that still isn't enough maybe "snakes" and "level-set" approaches are for you. The user could draw a rough curve around the object and the algorithm tries to find the actual exact border. These algorithms are especially designed to find optimal separations between fore- and background depending on whatever property you define and they can be controlled with few parameters (usually 2 or 3), which should still be easy enough for most users. I doubt Intel has an implementation for those, but I used this one some time ago: http://vivienmallet.net/fronts/ and it was very nice and open source, so you can easily adopt it to your needs.

    My suggestion is to start with OpenCV since it contains a LOT of different approaches, that are sufficient for most simple problems.

    Cheers!