Photo Booth like backdrop effect in js - javascript

I'm looking for this particular effect, like green screen, but without a green screen :P
So, you set a camera at a fixed place, then you take one photo that will be the "green screen" so you doesn't really need one.
Any plugin, easy-way, to do it with canvas/webgl?
Seriously.js is really nice, but only work's with a green background or a fixed color
Thanks!

Simply check each pixel against the "green-screen" image and and if they're equal by some threshold make them transparent, or set them to what ever you want.
Depending on the resolution of the image you want to process, using a normal canvas(2D) will probably be too slow to do this.
If you would like to process video content in "realtime" you would need to go with a webgl approach with a simple glsl shader.
I dont know of any libraries doing this for you. Using the canvas approach should be fairly simple, using webgl you would need to learn some webgl using framebuffers, textures, basic geometry rendering(a library like threejs could handle the aforementioned) as well as some basic glsl.

Related

Animated kinetic text and graphics on the web

How can I create animated stylized text, as well as some other animated graphic elements such as seen in this video around 1:21: https://vimeo.com/69200399
Can anyone help me start off, not help with a full code but just with things to research.
There are a lot of ways to do this, but I think you should look into SVG. It will render natively in-browser so will be of high quality. None of the elements you're referencing have much complexity... just shapes. The animation can be done via script. There are also some tools to help you with animation tweening if that's the route you go.
Another way is to use a tool such as Adobe After Effects and render a video. Then, you can use whatever effects you want and you will have a guaranteed look at the end. The downside is that you won't be able to adapt to different screen resolutions, and the quality won't be as high because the animation will be rasterized before anyone sees it. If you need transparency on the video, look into VP9 with alpha channel.

Implementing Image collage to a 'Word' shape using HTML5/JS

I would like to implement an image collage, where the photos are arranged on the page within a 'Word' object.
This is really hard to explain, this maybe why I haven't found any examples on the web. But as an example, let's take the word 'HTML'.
I would like to create a shape on a canvas on the screen, and then have photos transition onto the screen (easing, sliding, flying) and then arranging themselves sporadically around that shape. Then have the images clickable/zoomable. If possible, draggable as well within the shape.
Now, my first question, is this achievable, and how would I go about doing something like this?
I don't know too much surrounding HTML5 canvas, and am using this project to get my teeth into it. So I would really like to know briefly how something like this could be done.
thanks!
You can do something like a mask in photoshop you would get an image with invisible area with the shape you want to mark and then put the world image in the background.
This might also be of help http://www.html5rocks.com/en/tutorials/masking/adobe/

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

Between SVG and canvas, which is better suited for manipulating/animating several images? Maybe neither and just use css3 transforms?

The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!
The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.

Categories