Opencv.js - Background subtraction and replacement in Javascript - javascript

I'm applying the items in this tutorial, in an attempt to replace a background image while maintaining the foreground objects. Ideally, I'd like to replace the black and white mask that is generated with the color version of the arm holding the box, in a different setting (image background).
I'm familiar with OpenCV in python, but am struggling to find resources or documentation on what is and what isn't implemented in the opencv.js build. I realize that all of the functionality is not implemented in opencv.js. However, I am almost certain this is achievable with opencv.js, I'm just not sure what steps I need to take as it appears the python examples I'm trying to port are not correct.
That said, here's a python example that accomplishes what I'm attempting to do.
If anyone has any pointers on how I can turn the black and white mask into a bounding area to obtain the arm holding the box and swap it's color image background that would be helpful.

Related

Single image different background

I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.

Removing a color in image - CSS, HTML, JS?

I'm wondering how to remove a color in an image on a webpage. I want some kind of result like explained here...
An image with three segments: blue, purple, and red. I want to filter out all the blue so it ends up with the segments: black, red, and red.
blue purple red -> black red red
I know this would be done in CSS or JavaScript in some way but I do not know how I would do it. I've been messing with CSS filters and even putting a div on top of it that is a certain color, but nothing will get rid of the blue.
Does anyone know how to do this / is it possible?
You could try using CSS filters however, i don't think there is a filter for a specific colour and browser compatibility is limited.
https://developer.mozilla.org/en/docs/Web/CSS/filter
Alternatively you could use an SVG image which allows you to modify certain parts of an image using CSS however i think SVG files can get pretty big for large images...
I think you can use adobe illustrator to save files as SVG.
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst
Slightly more complicated, but far more compatible - load the image into a canvas, and then use getImageData within it, filter out whichever colours you don't want, then paste it back again.
It's not a quick (framerate) process - getImageData is a really slow function so an HD screen won't hit 60fps on anything except the most powerful machine. Saying that, if you're not trying to animate it then it's perfect ;-)

Remove background color from image in HTML5 Canvas

I'm trying to strip the background out of a photo image loaded into a HTML5 Canvas. Think of something like a green screen effect.
I'm using HTML/JS/jQuery
The background of the photo will be, for example, a green curtain. The color wont be exact across the curtain because of lighting and such like.
What i'm doing right now is grabbing the RGB value of a pixel that the user clicks on within the Canvas. That's then considered to be the background. I add the R+G+B of that pixel to set what is considered as the background.
I'm then going through the canvas, pixel by pixel, checking if the pixel is close to the RGB value set as the background (say within 50 above or below). If it matches, I change the pixel to be transparent within the canvas.
This works well enough as a proof of concept but not well enough to do anything with.
Does anyone have any better ideas on background subtraction?
Cheers!
Have a look at the GrabCut algorithm or GrowCut algorithm; the former describing 'Foreground Extraction using Iterated Graph Cuts' and the latter, 'Image Segmentation By Cellular Automata'. Both those papers will give you a deeper insight into some of the older algorithms used to remove background image data. If you could somehow implement one of those algorithms in Javascript then I think you're most of the way there.
The OPENcv computer vision library (written in c/c++) has plenty of efficient image manipulation methods to examine. You could try and port one of the OPENcv library's BackgroundSubtractor methods (which I believe is partly based on Chris Stauļ¬€er and W.E.L Grimson's algorithm) to Javascript and then use that to analyse the background and therefore subtract it, but I think they are based on progressive video frames rather than static images.
The js-aruco project on Google code has ported some of the functionality of the OPENcv library already (codebase is here) so you might want to look there first for some inspiration and then, if you're feeling brave, have a look at how you could program the GrabCut or GrowCut algorithms

Adding glow/border to edge of only the non-transparent portion of an image using javascript

I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript.
Previously we had a set of PNG images w/ transparency around the core image. When an image was clicked, a soft glow (ala border) would be added around the non-transparent portion of the image, slightly consuming some of the transparency but the majority of the outer transparent portion would remain transparent.
W/ javascript I can easily add a border around the entire image when clicked, but that is not what I am aiming for. I only want a border around the non-transparent portion of the image.
I'm unfortunately not familiar enough with image manipulation techniques, so I'm curious if there is a way I could achieve this using the various JS image manipulation libs out there ala BitmapData or Pixastic. Taking a look at both of these I wonder if there is something I could do w/ edge detection, glowing effects, and overlays...
If you're already using Raphael (or are willing to use it), you might consider using Dmitry's blur plugin. Building on this answer, I was able to achieve the glow effect I think you're looking for by adding another image behind the one I'd like "glowed". The background image is blurred, giving a "glow" or "halo" around the crisp image on top.
Sample code:
var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);
The plugin includes the caveat that there's no WebKit support. It seems that there is now some WebKit support as it works in Chrome (I'm running 18.0) but not Safari (I'm running 5.1.5).
I only want a border around the non-transparent portion of the image.
It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time.
I'm not sure it's entirely suitable for your situation, but there are tools out there to convert Flash to HTML (e.g. Swiffy). I suspect they can be flaky at times, but it's something to consider :)

Can we have "Chroma key" technique using plain CSS or jQuery?

This one is not trivial. I want to create a chroma key menu. For those not familiar, it is the same in video with the green background (or whatever color) being removed and special background is added.
I have images as a background in a menu. What I want is to set in someway the section where the background is transparent and the rest being filled with a color. In the example below, the background of the menu is image. Can we have such a background without one?
I am interested in unified solutions, not ones using css3.
I'm happy to be proven wrong, but I'm fairly sure the answer is no, not even with CSS3. Maybe using IE's very advanced filter()s but those aren't cross-browser.
Using a transparent channel for the background is the only way to go. It won't be trivial, but you could use a server-side script to change a specific colour into the transparent colour.
ImageMagick should be able to do this. Here's a promising example.
However, these examples are for replacing one colour. Whether it's possible to make this look good for anti-aliased edges (where the "transparent" colour blends into the surface colour, creating a mixture that the program would have to detect), I don't know.
If at all possible, use proper transparency from the start.
I imagine this would be possible on the client-side by copying the image into a <canvas> rendering context, processing the image data (like ImageMagick does) then outputting a data uri which you can use as the CSS background-image of your menu.
For reference see:
http://www.hmp.is.it/creating-chroma-key-effect-html5-canvas/
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/

Categories