Is there a way to remove black background from an existing video and make it transparent?
I've got this video with a black background and a moving person on the center - the client wants me to remove the background from the video so it will look like a sprite and can blend in with the background of the site - but I have no idea how to do that.
I stumbled upon this awesome thing https://jakearchibald.com/scratch/alphavid/ and I tried the source code - It did removed the black background but it messed up the character in the middle - it made it look like a black smoke and transparent.
I wonder if there's a "Blend" in css / js trick to make a black color go away from the video. (or maybe a js library)
Related
I am building a Javascript library which takes an image as an input, the output image will have all the human skin blurred like below.
I have got this script in python, which is working perfectly (example below) and I am converting it to JS using Opencv.js. The issue is I am not able to replicate the following line of code in Javascript.
out[global_mask>0] = blur[global_mask>0]
Here,
out: original image
global_mask: black and white image where all the skin is white and other parts are black
blur: blurred copy of the original image.
Can someone please guide me on this, I have tried creating an ROI on the original image and tried placing the black and white image over it. In my mind the path to achieve this is
Make all the black pixels in the black and white image transparent
Replace the white pixels in the black and white image with the pixels of blurred image at same position.
Place the new image over the original image.
I use video.js in my application for display custom videos. It is working fine but the problem is related to its style, when video displays a black border on its left and right side appears. That means video is not displaying on its full window.
I have not seen your code, but it seems like the container for the video element is not an exact fit for your video.
Perhaps your container width-to-height ratio needs to match the video you are trying to display, otherwise if the borders only appear black on the left-right, then the video containers height is too small and should be larger.
im creating a way for users to add some buttons to their image. Now i thought it would be cool if the button could change color depending of the background color of the image.
To start with i wanted to go for the black / white contrast.
So if the background is white then the button will be black and if the background color is black then the button should be white.
My question is however is it possible to identify the background of an image using only javascript? and if so how?
This will take care of everything for you just set up the selectors for each condition.
https://github.com/kennethcachia/Background-Check
Here is an example I've put together to better illustrate this problem:
http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html
When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.
The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.
Thanks,
Saeid
I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?
I have some png vectors with transparent backgrounds that I want to color overlay on the fly, so users can choose a vector and then choose which color they want it from a picker.
Only stipulation is that they cant be masked with background colors, because multiple pngs will be loaded onto the same canvas and will need to overlap.
How exactly do I go about loading an image into a canvas and then overlaying it with a certain color?
Edit: I have found some info here and here ( - answer by Nathan ) which sort of work, but not in all browsers.
The second one especially as I need only the png itself to be overlayed, and the transparencey to stay transparent
Practically you want to load the image into canvas and overlay it with a certain color, that will give a color effect to the overall image.
This jQuery plugin does exactly that, it loads the image into canvas, manipulates the color giving the nice tinting effect and convert it back to image element. Converting this back into image element is a very important part, as some user may style their CSS base on img element, instead of ID or class.
Just play with the interactive demo:
and go through the docs:
Have fun.