Blurring skin in image using OpenCV.js - javascript

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.

Related

Remove (Make transparent) Black background from video (HTML5 / CSS /JS)

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)

How can i cut an area of image before drawing to canvas

I am working on a canvas tool in which i will drag and drop images.
There is a large image which work like a background and then there will be another images which will be dragged.
But i need to cut some area of image so they can't override some area of previous image.
After image drag
Please review the above link and help me how can we achieve this.
Regards
Aman

Change background image color on canvas

I have created a canvas with specific background color (lets say red). Now i want to drawn an image . The image I have is a computer icon but having white background .When I draw the image on my canvas , the canvas background is red but the image background stays white and hence it doesnt look good.
Is there any way I can change the background color of image to red or acheive my desired behaviour?
Thanks
Hasan
As you say I have is a computer icon but having white background, so Yes you can; there are a lot image processing tools available online to change background color to transparent which is required by you to avoid overlapping. Here is one of them.

Rollover image hides the element below from mouse. How to fix?

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?

Image color overlay in HTML5 / JS

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.

Categories