Check if image background is white using Javascript - javascript

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

Related

How To Change the "div" Color based on Background?

I have a black chatbot icon on the bottom right of the website. My web footer has a black background as well. So I need to change the color of the Chatbot to white as I scroll to the bottom of the page.
I used Scroll bar Height to make the color difference.
do you mean that you want a fixed icon to have a white color when the background is black and black if the background color is white while scrolling?
if u mean that then use on that fixed element this code in CSS mix-blend-mode: difference;
and sorry if i miss understood the question i think its better to add some code to
explain what u want better

How to make part of text that is on an image a different color on hover

example of what I'm trying to achieve
https://dribbble.com/shots/15453707-Si-Design-P-C-Homepage-Motion
I saw this example on dribbble where if you hover over the image, the text appears. The text is black on the white background and white on the image. I've tried using mixed-blend but that doesn't give the same result. Any suggestions on how this was achieved.

Backdrop-filter on a custom cursor?

I was wondering: Can I apply backdrop-filter:invert on a cursor in css?
So let's say I have a custom cursor (png, svg...) and I want it to always be the inverse color of whatever the background is.
(On white b.g. it would show as black, on blue b.g. it would be the opposite color, and also on a photo, it could appear as "negative".)
Does someone know how could this be done?
Thanks!

Font Color good Contrast for every Background Color

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.

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.

Categories