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.
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 want to know if it is possible to change the font color/foreground color, depending on what background I have.
Let’s say I have a webpage, and the user is able to upload an image to that site, and that image will be the background image of the website.
After the user uploads the image, I want the font color to adjust for the background color, so that the font color is good and readable, depending on the background image's colors.
Let's say a user uploads an image which is mostly black. Then, the font color should be white (or some other color which is good and readable on the black background).
When the user uploads a (mostly) white image, then the font color changes to black (or another color which is good to read on a white background).
The website is written in ASP.NET.
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.