Background Removal (Segmentation) with OpenCV (Take 2)

Since I last wrote my post on background removal in 2016, I’ve searched for alternative ways to get better results. Here I will dive into my new approach.

Website Revamp

What a better way to start a fresh website than speaking about how I started it fresh?

Previously my website was a custom written static website generator with Mozilla’s nunjucks library hosted on Rackspace cloud files. The stuff that I liked about this setup compared to say using Wordpress or Ghost blog was that

  1. the website was fast to serve. It’s just static files over a CDN
  2. I had no headache maintaining the platform.. like worrying about backups, upgrading, security updates.
  3. the hosting was free. Rackspace cloud files is storage + CDN is free.

What I didn’t like about this setup was the writing experience. It’s was all hand-written HTML and nunjucks templates. And even though I am proficient with HTML, it isn’t as convenient as say Wordpress or Ghost blogs. I wanted a better writing experience, but by still keeping the good things about a static website.

So I went searching for a better way and found couple of new & old tools

Background removal with OpenCV (AKA segmentation)

Recently I’ve been playing around with OpenCV and Python to try and automate the process of removing background from an image of an object.

Sample 1 (050.jpg) Sample 2 (078.jpg)

From the images you can see that the background is close to plain white. You can also see that the second image shown is pretty blurred and not well illuminated.

OpenCV has several ways to remove background (like watershed algorithm, canny edge), but none of them seems to work good (out-of-the-box at least) on the images I was using. (Which is surprising, by the way, since OpenCV is quite popular.)

Know the browser APIs. Know the little tricks.

Many front-end devs don’t know some useful JS and DOM API. Many of us happily use jQuery when the same API is available natively. Check how many of these you know…

JavaScript Debugging Tricks

When working with large complex SPAs one may hit situations where one has to think beyond the usual debugging tricks.

Here I list a few of them I had to use at work…

Prototype and Inheritance

In this article I’ll be exploring, one of the most confusing features of JavaScript, the prototype object. Understanding prototype is necessary to achieve object “inheritance” in JavaScript, which is similar to what you’ve seen in other programming languages. But first, I’ll be explaining what prototype is, what it can do and how it works, before moving to inheritance.