Detecting white image background with PHP? - javascript

Is it possible with PHP (alternatively JS or something similiar) to detect if an image has a mostly white background?
It is because where I display my images there's a white background. And some images have a dark or colorful background, but some are white or mostly white. And I have a css class called img-shadow that adds a shadow to an image. So I would like to add that only if the background of an image is white or mostly white.
Here's an example to show you what I mean:

Even there are a lot of pitfalls in whole process, I would choose doing it using PHP.
Firstly, answer yourself following:
What exactly will be mostly white background? Does RGB(250,250,250) still counts?
Does PNG with alpha channel counts (RGBA)?
Does image with light/bright yellow counts?
Does image with black border (frame) and white center will stil counts as white
background?
Will user be able to upload image?
You have to:
Load image
get histogram
Analyze according to your rules
Add meta info about particular image and generate css class on output.
On top of that I suggest:
Some sort of result caching or metadata storing so on every script execution images won't be analyzed
Check if image has border (develop algorythm by looking on sides of picture)
Treat alpha channel same as white color (maybe dark logo with round corners - no white color)

Related

Digital Image Processing - How to determine percentage of "X" color from "Y" colored background

I'm building a mobile app via React Native that requires some image processing: I need to determine the percentage of color red splotches on a green colored background. I've done some research already into some other discussions on the ImageMagick discussion archives, but I'm really lost.
There are two main things I need help with:
1. Again, devising a method to extract the percentage of color red splotches covering a green colored background (e.g., "this image is 40% covered with green")
2. How I would go about implementing such a method in my React Native project (javascript).
Image Stipulations:
1. the image will be taken via a smartphone
2. image will not have 1 red rgb value and 1 green rgb value, but rather a range of colors close to red and green on the image (this is a consequence of there will be shading on the image
If you can lead me to any old thread, a specific topic to read on, or anything that would mean the world to me!
Thanks

Change opacity of certain color of Phaser.Sprite

I have a sprite sheet where black pixels stand for transperency. So, when I load a sprite from this sheet, I don't want those pixels to be shown.
Therefore my question is the following: Is there an easy way to tell Phaser that opacity of a certain color of a sprite should be turned transparent?
If you need to do this just one time, then you could do it with the help of online tools like lunapic.com.
Upload your sprite, select a color you want to make transparent and thats it.

Change the color of an SVG based on the color of another element?

I'm in the middle of making a sidebar for a web aplication that uses a user-uploaded image as the background element (seen here: http://c.mhy.me/WwMs). Since the image will be uploaded by the user, I'm wondering if I can change the colour of the logomark on the top (svg) based on the color profile of the image behind it.
For example, if the image has a lot of white, then change the logomark color to a light grey. Otherwise, keep it white for images that are primarily made up of darker colors.
Thanks in advance for the help.
You could use something like Background Check to identify the lightness of the image directly beneath the logomark and change the colour based on that.

Can I change color of image pixels based on background pixel color in web page?

I would like to create an html element with a given background colour, and some text. I would then like to place an image in this div, and where the image overlaps with the text replace the color of the pixels with some other colour. The image below demonstrates the effect I would like to achieve, if we imagine the image is the black blob. However, in real life I want partial overlap of letters to be possible with the same effect (i.e. I don't want to just change the font colour where it overlaps.)
Is this possible, and if so, how?
You can assume the image is a single block colour, and that I know the exact colour as I am creating the image. You may use any web technologies, and the image will be created as a vector image so can be any format, including svg.
Not sure what the browser support is nowdays but you could try this:
http://css-tricks.com/image-under-text/

html canvas saveAsBmp image saved with grey-ish background?

I have an OpenLayers based heat map that is populated with various heatmap layers, red yellow green gradients etc. I want to take the gradients/dots only with a white background, excluding the map totally. However when I save the bmp images I get a grey-ish background. How can I make sure I have a white background? My save code is like this -called from a button click jquery event-
Canvas2Image.saveAsBMP(heatLayers[currentHeat].canvas);
Saving the files as PNG took care of the issue.

Categories

Resources