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

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/

Related

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 Stauffer 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

Text masks out the background

You have an object (span or div e.g.) with text. And this text should mask out the colored background of the object so that you can see the very background (of body element e.g.).
I know there is "mask-image". But they don't want to develop this CSS3 technique further. Is there a Javascript solution maybe so anyone can see this?
Is there any chance to do this cross-browser?
Can't think of a technique to do this in javascript or html. However, an approach that could be used (although not entirely desirable - I realize that this is going to be time consuming) would be to create a transparent .png for each letter, set the background of the letter to transparent and the rest of the image to some color, and then use those. You would have to make a whole set for each color you wished to use. You could also just make an image which was one word in a .png and use that which would be easier. This would be the only current way to get this to work with all browsers including older ones such as IE6 where the newer techniques are not available.
The reason, in my opinion, that this will not currently work, is that when you have text inside of a <div> or <span> even if the text is transparent, it would merely default to the color of the <div> or <span>. If their background was set to transparent, then nothing would even show up. Conversely, if their color was set, the text would not show up because it would merely inherit that color.
It looks like the closest you can get to full cross-browser support (without using images for each character in the text) is the very-limited tricks shown here. These tricks wouldn't work with a photographic bg image though.
If you don't require support for IE8 or earlier, you could investigate doing this in SVG or Canvas. Note however that Android prior to 3.0 doesn't support SVG, which rules out as much as 85% of existing Android devices.
Webkit has a proprietary background-clip:text style, but it only works on Chrome and Safari.
Using color:transparent for the text turned out to be completely useless for this.
On the whole, the best bet may be canvas, especially if you can find a JS library or jQuery plug-in that provides a VML alternative for IE8 and earlier (assuming the VML solution supports text masks), or if you can provide a graceful-degradation fallback option for IE8 and earlier that looks adequate even without a text mask.
Another solution that's easily overlooked: If you can dynamically render an image on the server using the current text on the page (caching it as needed), and then serve that image to the client, then there are no cross-browser issues to deal with. This could possibly be done in PHP using the GD graphics library, for instance.

Is there a way I can create a small graphic using vector drawing on a web page?

I would like to have an icon that resembles a ballot check mark which changes color depending on a data value. The icon would have very few lines in it.
Is there some way that I can create this on the fly rather than have to import an image. The reason is that I would like to be able to change the color of the icon or for example sometimes have the inside check mark of the icon appear in a color that is different from the outside. I'm not looking to use flash or anything fancy. Just hoping there is some way I can code this so it will work in modern browsers such as IE9 (if you can call that modern) and later.
Make a white image(gif|png) with a transparent hole in it make the hole the shape of a tick.
Now set the image's background color to whatever you want.
Just thought of another way, there are two ticks in most modern Unicode fonts at 0x2714 and 0x2713
✓ - Thin Tick use ✓ in the html page
✔ - Thick Tick ✔
I can't get SO to show these in colour, but you should be able to colour them as you need.
SVG is a W3C-specified format for vector graphics. Internet Explorer supports it from version 9.
You could:
Use HTML5 canvas to draw the icon with JavaScript, or
Use a server-side script to generate a .png or .svg, using appropriate libraries for your language.

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 :)

Categories