
Show HN: Remove backgrounds from images online - jacobn
http://clippingmagic.com/
======
sjtrny
I actually wrote my honours thesis on this topic. In academia it's called
Alpha Matting/Image Matting.

There's a great website <http://alphamatting.com/> that provides a benchmark
dataset and a comparison of a lot of influential methods.

I applaud your work in making a real time and interactive matting algorithm!
One day it might be also as accurate as state of the art methods. You guys
should write a paper about your method.

~~~
jrd79
(I'm one of the devs.)

Thanks for the link! Real time is a pretty big constraint, and the input for
those results is a much more complete labeling than we expect (only 22 to 44
pixels around the ground truth boundary are left uncertain). But I'll
definitely read the paper and hopefully we can gain some insights from it!

~~~
sjtrny
Have a look at KNN Matting <http://ihome.ust.hk/~dli/projects/knn/>. Their
MATLAB implementation uses a similar style to yours but is not as real time.
They take single mouse clicks and spread them over a much larger
window/bounding box. Only takes a few clicks on foreground/background to get
excellent results.

------
chc
This is really slick. I work at a newspaper where we do a lot of cutouts and
I've looked at several automatic tools to save people time, and I think this
is the best I have seen in terms of balancing ease of use with accuracy.

The only thing I might suggest is that for photos with softer edges, you might
offer some degree of "feathering" on the edges of the cut out. I don't know
how hard this is with your algorithm, but it seems like it might be an easy
fix.

~~~
jrd79
(I'm one of the devs.) Thanks! Yes, adding user-controlled edge blur is a
great idea. So much to do, so little time.

~~~
pmelendez
Congrats! I had a similar idea a while ago so I really appreciate that
somebody accomplished it in so high level! I already signed up and already
waiting for the post alpha version :)

Did you guys consider in the future to add multiple object segmentation? That
looks like a natural next step. Keep it up the good work! :)

------
patio11
This is beautifully done -- great UX, truly impressive tech. My wife loves it
and is using it to repurpose some shots from our wedding for e.g. Christmas
cards.

~~~
HorizonXP
Completely agree! I actually tried it out with one of our pictures [1] from my
proposal in Rome. I'm just having a bit of trouble with the small tuft of her
hair that's forcing the algorithm to keep some of the background. I suppose I
could probably fix this by using the full resolution picture, instead of this
scaled down one.

I'll be recommending this to many people!

[1]
[https://www.evernote.com/shard/s130/sh/2ef070f7-252d-4e79-8e...](https://www.evernote.com/shard/s130/sh/2ef070f7-252d-4e79-8ed4-7e538ad0a335/643fefc7da272ef1584cf76540238e69)

------
gibybo
Wow. So I went looking for an image I thought it would have a hard time with:
<http://fileza.com/d/5h2wco/clippingmagic_test.png>

A pretty busy background, soft/furry edges between subject and background,
less-than-obvious clear color boundaries.

The real-time feedback makes it easy to give it the markings that it needs in
less than 20 seconds for a near perfect crop (or as good as one would expect
with fluffy hair as a boundary). I was pleasantly surprised.

------
stmchn
Really neat. I was really itching to use CTRL+Z though.

I screwed up the first image I tried to clip. Maybe have a walkthrough of the
features when the user first uses it? I didnt notice the help button until it
was too late. I thought if I closed out of the editor and clicked on the image
again, it would let me start over but it just takes you back to the editor. It
would be nice if there was a way to redo editing the image from the start.

~~~
jacobn
Yeah, we need to add both undo and reset/clear.

The help should have shown during the upload / init!?

~~~
matchu
For me, the help popped up for an instant but then instantly vanished. Does it
only appear during upload/init? That process _can_ go quickly…

~~~
jacobn
We only auto-show it during that time. The hope is that it triggers you to
click the button if you need it, but lets you ignore it if you already know
the drill...

(all these wonderful tradeoffs between "first visit" vs "repeat visit" - and
what if it was missed the first time, blabla... )

~~~
scott_karana
The animation was a bit too quick to make that behaviour obvious, so I just
tried without it the first time. I thought it was a bug.

The second time I loaded an image, it did the same thing, and only then did I
actually click Help.

~~~
stmchn
Yeah, same thing for me. The action was too quick for me to notice that it was
intentional. I would just leave the help window open on first time use until
the user decides to close it. Very nicely done site though!

------
StavrosK
Worked pretty well for me: <http://i.imgur.com/db0QOet.png>

~~~
alexchamberlain
Wow! Anyone know the stack?

~~~
jacobn
Image processing backend is java, website is scala + play framework (
<http://www.playframework.com/> )

~~~
Bjoern
RequireJS! :)

~~~
jacobn
Ah, yes, and some JS for the frontend... ;)

------
saurik
I get "Your Browser Is Out Of Date... Terribly sorry, but your browser appears
to be missing key feature(s) required to use this website: Data URL Support
Please try the latest version of one of these browsers instead: Google Chrome,
Firefox", however I'm using Safari 5.1: data URL support has been in Safari
since 3.1 (according to <http://caniuse.com/datauri>).

~~~
snogglethorpe
I get the same message for FF 21.0 on my phone ... it's the current beta
release, so I'm not sure how to run anything newer without building it
myself... 😓

~~~
diggan
If you want something newer, try Aurora[0], it's the nightly build, pre-beta,
of Firefox. But should work in Firefox Beta.

[0] <http://www.mozilla.org/en-US/firefox/aurora/>

------
ars
How does this compare to the gimp "Foreground Select tool"?

<http://docs.gimp.org/en/gimp-tool-foreground-select.html>

~~~
UnoriginalGuy
Doesn't matter. Gimp is insanely hard to use. This isn't.

~~~
ars
I guess you've never actually used gimp.

Because this is _exactly_ how the gimp tool works - you highlight the
foreground, background areas and it shows you in real time what it's picking.

It's so similar to it I was wondering if it actually _IS_ it (behind the
scenes).

~~~
pbhjpbhj
GIMP doesn't give you a realtime boundary like this does, nor a preview image.
I've done a lot of alpha matting in The GIMP and this seems far quicker to get
similar results (except the up/download for me).

For quick and dirty work I'd use this for sure but revert to a desktop tool
for precision work I think.

Does anyone know other Linux tools, or online for that, that do this
comparatively well?

~~~
ars
> GIMP doesn't give you a realtime boundary like this does, nor a preview
> image.

Yes it does. Look at the link in my post - Figure 14.33. The dark blue area is
the background that will be removed.

~~~
pbhjpbhj
I use The GIMP for these sorts of things, the boundary is not realtime in the
same way. As you select using the foreground or bg paint, the boundary doesn't
change immediately. Instead it waits until you've finished painting, un-click
and then it processes - it's a minor but significant difference in UX.

------
gavinpc
This is great, especially for an "alpha" (ha ha).

My wife will love this for creating transparencies (she does serigraphy).

------
tghw
Very cool! I've seen this technique before in research papers and their
videos, but not as actual software.

The one suggestion I would make is to follow Photoshop's shortcuts. Space-Drag
to move the image, [ or ] to change the brush size, scroll wheel to zoom
(already there), and letters to select the various brushes.

------
Presence
Pretty neat! <http://imgur.com/p1B9Hng> But sharing the shift key as the
hotkey for erase & panning made Windows's "Sticky Keys" dialog appear a couple
times.

~~~
jacobn
Ah. Good point. We recently changed the shift key from "hold to pan" to toggle
between pan / erase. Should probably change it to another key now that the
operation is different.

------
est
Didn't work very well for hairs

<http://i.imgur.com/g16qR4J.png>

~~~
jacobn
That's right, we don't handle hair yet. See the bottom of the page.

(I'm one of the devs)

------
frankacter
Seems that the same tech could be reapplied to giving depth of feel to images
by giving an option to unfocus the background instead of just deleting it.

Filters could also be a consideration for future (ie. popular things like
black and white background with a color foreground)

------
Zircom
It's doing the weirdest thing for me, I get this[1] for the preview, but I get
this[2] when I download it. Other than that it works better than I expected
for non-real life stuff.

[1] <http://i5.minus.com/i49HmJ8HXW90P.png>

[2]<http://i4.minus.com/ipofptgUlIIlj.png>

closer inspection on the preview reveals this

<http://i1.minus.com/iTe6ZEeS9Xv1k.png>

It's playing nice with all the other screenshots I've thrown at it so far,
though.

here's the original I guess if anyone wants to see if it happens with them too

<http://i5.minus.com/iC7VIeASPpmHi.jpg>

~~~
jacobn
Wow, yeah, that didn't work right. Thanks for pointing it out! I'll take a
deeper look tomorrow. (I'm one of the devs)

------
christiangenco
Wow! This is incredible. An interesting alternative to the iWork "instant
alpha".

------
cheeze
Is anyone else getting an error?

"Network Error

We are having trouble connecting to the server. The following tasks have been
unable to complete: Connecting to worker "Unable to connect to the worker."
Waiting"

This is occurring after I drag and drop an image

~~~
jacobn
Sorry, that's me being slow scaling out the backend. I've added a couple more
boxes. (Haven't added auto-scaling yet)

~~~
Schweigi
I first thought that there is still the same problem but then I saw that the
web socket worker is using 9006. Our company network is blocking unusual
ports. Any chance to move that to 80, 443 or 8080?

[http://ec2-23-20-184-45.compute-1.amazonaws.com:9006/api/web...](http://ec2-23-20-184-45.compute-1.amazonaws.com:9006/api/websocket?imageId=7542&secret=..).

------
alainbryden
Miraculous. Took me 15 seconds to remove this picture of my lovebird from a
pretty busy background:
[http://clippingmagic.com/images/10765/f5ddd90ec956d482174e7e...](http://clippingmagic.com/images/10765/f5ddd90ec956d482174e7e9616c00b0ba64e42a924683d6abfa2d9093bce2beb)

I thought it'd have trouble since the bird is constantly changing colors but
with just a scribble and a circle it figured it out.

------
emillon
This is seriously great and very intuitive to use. Two small improvements : it
would be great to be able to change brushes (at least size). The workaround is
zoom/draw/unzoom which is a bit awkward. The second thing is to add an example
on the landing page. I didn't take the time to try it on a picture of mine
until I read the comments (and saw screenshots) here. HTH, keep up the good
work!

------
wbharding
Also available, and newly made free: <http://www.bonanza.com/background_burns>

Pros: Doesn't require the fg/bg coloring step needed here, just figures out
your FG without intervention. Cons: Have to register for an account to access
it currently, but can use FB or Google to register

------
hahla
Thats cool, but still it needs a lot of work/features. I tried removing the
background using the purse picture in the pictorial, and it wasn't as easy as
it was made out to be and I wasn't able to achieve the same results. Maybe I'm
missing something, but the fixed brush size makes it pretty useless at this
point.

~~~
jacobn
Also, one of our usability headaches is that people draw OUTSIDE of the lines
- any pixel marked green WILL BE IN THE RESULT.

Now, that's not how people actually use it at first - they "just scribble"
(which our example might exacerbate), and then accidentally go outside the
actual lines => not good.

Will need to figure out a way to make that more clear.

~~~
mnicole
I copied the marks in the example and besides needing to tell it to include
the cream color under the strap, it worked exactly as shown on the homepage,
so maybe just add that extra red there in the example.

Unfortunately it is freezing up on me using an image with a gradient at about
90% of the initialization.

~~~
jacobn
Yeah, we're getting some null pointers in the worker. Not entirely clear why
that's happening (it of course wasn't happening an hour ago...).

I think I stuck a race condition in there somewhere and it's getting exposed
for the first time.

Please try uploading the image again :-/

~~~
anttip
Could be related to the image color profile. Noticed the same issue when I
uploaded a jpeg image with a CMYK color profile, with RGB images it worked
normally. I've had the same trouble when using Java's ImageIO to read images.
There were some workarounds, but I didn't find a robust one. Ended up using a
preprocessor to normalize images before reading them with Java. Would love to
know if someone knows a better solution.

------
mccolin
Really found this quick and useful. Easy to achieve what I often have to
agonize with in Gimp or Photoshop.

~~~
jacobn
Thanks!

------
ck2
I will use this every week. Might be the best "Show HN" yet.

Great domain name too, especially how hard that is these days.

------
k-mcgrady
Really nice. First time I tried it I carefully shaded the red and green areas
and it worked ok. After looking through the comments here though I clicked
green once on the part I wanted to save and then 3-5 red clicks in other areas
and it worked flawlessly. Great job.

~~~
jacobn
Yeah, we need to figure out a way to get people to do the first time what you
did the second time...

~~~
k-mcgrady
I worked it out after seeing this comment[1]. A screenshot like that placed
close to the file upload box may help.

[1] <https://news.ycombinator.com/item?id=5683162>

------
Shivetya
Interesting, but shadows, brown and blacks, tend to trip it up. Was playing
with a photo of my car that is really difficult to break out because the rear
bumper is pretty dark in shadow and blends to the driveway.

Does work well in high contrast shots.

------
thekiwi99
Works much better than I expected it to, so props. Brush size could be smaller
though.

~~~
jrd79
You can make the brush size smaller by zooming in.

------
kepano
I tried hitting it with a toughie (monochromatic, low res, lots of subtle
shadows), performed amazingly well: <http://i.imgur.com/mW58VC2.jpg?1>

------
atgm
I've been trying to use the demo for the last... 30 minutes or so, but after I
upload the image the "Initializing" progress bar in the "Booting" window
always freezes around 90%.

~~~
jacobn
We probably have a bug. Please try another browser and hopefully I can nail
that issue soon. (I'm one of the devs)

~~~
atgm
I was using Chrome Version 26.0.1410.65 on Mac OS X 10.7.5.

Opera 12.15 is apparently not compatible since it lacks data URLs.

Safari Version 6.0 (7536.25) freezes at the same place.

Firefox 20.0 gives me an error in a dialog box saying that it's "unable to
connect to worker."

~~~
jacobn
Hmmm. That's not ideal. I added some more servers, so hopefully it can at
least connect to the worker now. Sounds like I have some JavaScript debugging
to do. (I'm one of the devs)

~~~
atgm
I just gave it another shot with the same results in all browsers.

Edit: I'm in Japan and going through a http proxy, if that makes a difference.

~~~
samwillis
May do. I think it uses websockets and they are a little temperamental over
proxies.

~~~
Schweigi
I already wrote that a little further down in my other comment. The web
sockets are using port 9006. Maybe this is an issue on certain networks.

------
todd3834
This works way better than I had expected. Very well executed!

------
wingspan
Really nice work! I tried a fairly complicated image and it worked quite well.

Couple bugs: 1) Chrome on Win8 consistently gives me the Network Error dialog
when trying to upload 2) Was able to get it working fine on IE10, but
sometimes the background still shows up in the preview, even though it is
erased correctly in the download. <http://i.imgur.com/fSB4n4r.jpg>

------
tomcam
We all know these things never work as well as the demos. Well... this worked
as well as the demo. Better, actually--I was literally finished before I knew
it because I didn't see the real-time update on the right at first. A
deceptively simple UI and beautifully implemented. Useful, well conceived--I'm
quite impressed.

------
glenjamin
This is really nice, it would be cool to add a rotate button - the image I
picked at random to upload I think was rotated via EXIF.

Also, it'd be really cool to have a "simplify lines" type feature, I was using
a fairly dark photo and the lines were a bit jagged - but generally the
foreground item will have smooth edges.

~~~
russellsprouts
Yeah. The same things happened to me with an iPhone picture.

------
mcescalante
Adding a "step-back" button (even if it was only a few states), and the
ability to increase or decrease brush size would greatly enhance this. Great
start though, and something like this is much needed for a lot of people who
may not know an image editor, or don't want to open it for something simple.

~~~
jacobn
Undo is sorely needed.

Just deployed a smaller brush size (30px instead of 40px when zoomed out).

It should get picked up when you reload the page (though default asset caching
might hold it for another hour. Well, well)

~~~
mcescalante
Otherwise, this is a killer job :) Keep up this awesome project!

------
huhtenberg
Tried removing a background from a stock car photo. It involved quite a bit of
precise mouse wiggling and the end result was still pretty sloppy looking. I
assume there are cases where this works well, but it would probably help
clarifying what those are before inviting people to try the tool out.

~~~
jacobn
See the bottom of the page (yes, it could be more clear): you need good edges
in the image. Ideally also good chromatic separation.

------
msantos
That's a very neat solution! Really like the UX too. A long time ago I had a
crack at it because I was working on an app that requires image background
removal.

In the end I settle for a hybrid like this
<https://gist.github.com/mvsantos/5554663>

------
sweedy
Great work! Fast and easy to use. Just curious why more and more projects dont
support opera =(

~~~
nick2021
You have Chrome, Firefox, and even Safari. What compels you to use Opera over
any of those?

~~~
PavlovsCat
Bookmark manager, speed, GUI configurability. It's pretty much the difference
between a yacht and a tricycle.

I won't even let Chrome on my sytem directly (i.e. outside of a VM), because
I'm tired of it downloading updates with some super needy background service,
keeping 100s of megabytes around for no good reason, and no way to turn it
off. At least Mozilla products ask. For that reason alone Opera and Firefox
play in an entirely different league than Chrome or Safari. Fuck features, let
me see your heart... Firefox I use and love, it's just not my main browser
because only Opera has bookmark management worth calling that.

------
anonymoushn
I got a bunch of "Failed to get a worker assigned: undefined" for a bit, but
once that stopped happening and I figured out the zoom, it was very
impressive: <http://i.imgur.com/WT4bH5M.jpg>

------
jwarren
Wow! That's amazingly easy for good-enough results. With some general UI
slickening up (good suggestions in this thread), this could save a lot of
people a lot of time. How have Adobe not wrapped this into Photoshop yet?

------
cheez17
Works well.
[http://clippingmagic.com/images/15861/a22417d1c2cc94b5d0efb8...](http://clippingmagic.com/images/15861/a22417d1c2cc94b5d0efb8def7d45e89b687566e292271c69d65f97addfae78f)

------
lessnonymous
Another vote for space-to-drag. Though, I guess us photoshoppers probably will
continue to use photoshop for this sort of thing so our muscle-memory
shortcuts might not be so important :-D

------
RobotCaleb
Very cool. The red and green suck for us color blind folks, though.

~~~
jacobn
Ah. Ooops. Sorry! Will have to think a little about that one. I guess there's
a reason it's team red vs team blue...

(I'm one of the devs)

~~~
RobotCaleb
Thanks! Colors aren't a good way to portray information accessibly.

I just helped dto implement color blind support in his game 2x0ng[0][1] and we
settled on the solid colors being hashed[2] to allow people with all forms of
color blindness access the game.

[0] <https://github.com/dto/2x0ng> [1] <http://blocky.io/2x0ng.html> [2]
<http://imgur.com/a/098zC>

------
itry
Pretty Awesome. Would be good if you could choose a smaller brush.

~~~
jrd79
You can get a smaller brush by zooming in using the mouse wheel. That way the
brush is always an appropriate size (small when you are zoomed in for detail
work, and large when you are zoomed out for the broad strokes).

------
undo
Worked really well for me. One issue though: after doing a few of these and
returning the main page, my uploaded images look broken. Anyway, great job!

~~~
jacobn
Yeah, sometimes the thumbnailing doesn't quite succeed (that's all done client
side). Somewhat unclear why. Still some debugging to do...

------
charonn0
It claims my browser (Firefox 20.0.1) is out of date :(

------
markcmyers
A beautiful piece of work. I'll use it again and again. Any roughness in the
resulting image can be fixed in a couple of minutes in Photoshop.

------
brianberns
This seems very similar to the "Magic Wand Tool" in Photoshop. It's nice that
it's free online, but it doesn't seem to produce better results.

~~~
qqg3
Eh, maybe you don't use Photoshop much but this barely similar to the Magic
Wand in any way other than selecting a part of an image. Magic Wand doesn't
give you a nice live preview of the alpha channel for starters.

------
windsurfer
It's pretty tough to use, but it's not bad: <http://imgur.com/QvZjAfU>

------
Ntrails
Would be good to be able to give an image link, and not just upload from the
computer. Really sweet tool though

------
sudhirj
This is kickass... is the whole thing happening in JS or server side? Any idea
what algorithms are being used?

------
peter-fogg
Any chance of source code, or at least a detailed post explaining the
algorithms behind this?

------
abimaelmartell
Scala & Play Framework :P

~~~
jacobn
Yup, they're pretty sweet ;)

~~~
dhruvbhatia
You should consider doing a write up on the tech stack you used!

------
cheez
You need to add this as a photoshop plugin STAT and sell it on your website.

------
loceng
P.S. Reddit will like this.

------
mpclark
Wow. This is so fast and so slick, and works very well. Well done!

------
jgalt212
intensely cool. very useful for re-purposing icons whose backgrounds would
otherwise clash with a website's color theme.

~~~
jacobn
Yeah, it actually works really well on vector art. If you're into that sort of
thing, check out the sick bg color removal and alpha channel "recovery" by
zooming way in on the boundaries.

(I'm one of the devs)

------
vital
Why don't you contribute to GIMP instead?

~~~
skoob
GIMP already has a feature like this: <http://docs.gimp.org/en/gimp-tool-
foreground-select.html>

------
notyourpal
lazy people like me are now a step closer to having good photo editing skills.

------
alleyla
this is really awesome! undo/redo and "start over" would be very helpful.

~~~
rex_gsd
I agree, definitely needs these buttons. Works amazingly well!

------
Moulde
Works really really well!

------
tunnuz
Works great!

------
ank286
does it use GraphCuts?

~~~
Bjoern
Like the interface! :)

There are many ways to solve such a problem. Another one beside GrabCub would
be e.g. Watershed.

<https://en.wikipedia.org/wiki/GrabCut>

[http://en.wikipedia.org/wiki/Watershed_%28image_processing%2...](http://en.wikipedia.org/wiki/Watershed_%28image_processing%29)

So many variations available via e.g. OpenCV.

~~~
jrd79
(I'm one of the devs.)

Regarding the segmentation phase, we were not satisfied with any existing
algorithms because we wanted the tool to be as real-time as possible (for up
to 4 megapixel images), so we rolled our own segmentation algorithm that has
some similarities to GrabCuts (not GraphCuts).

But the binary segmentation is really only a small part of the technical
challenge. You also need to figure out how to anti-alias the boundary, and
remove the background halo. Simply feathering doesn't do the job unless you
also erode the foreground first, which we wanted to avoid. So we developed a
custom sub-pixel background-removal and anti-aliasing algorithm.

~~~
Bjoern
I think you guys did a great job. This is a very tough problem (speaking from
experience) particularly depending on the complexity of the image. One problem
we had to solve along the way for our startup is similar, but focused only on
fashion related images. Quite tricky particularly if you want something
automatic. Anyway cheers! :)

~~~
jrd79
Thanks!

------
edgely
Very cool. Stalled each time for me at the "initializing" phase when using
Safari 6.0.1 (OS X 10.8.2), but worked like a charm in Chrome.

