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.
Related
So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.
I'm trying to use tint filter on some images in canvas, it works great with white images but not with colored ones, it keeps the original color of the image and apply the tint color on top of it, so it gives the wrong color.
Found out later that maybe I'm misunderstanding the tint filter concept and that it's not meant to recolor the image, so is there any way using fabric filters to recolor images ?
image-here
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)
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/
I have an star icon. I want to use this icon in an unknown number of colors.
Sometimes I need a red star, sometimes a purple star.
I could dynamically create images on the server with a web service.
What I'm curious about, is there any way to control the color of this icon without explicitly creating an image for every color I may need ?
You should use glyphicons or some other type of icon-based font: http://twitter.github.com/bootstrap/base-css.html#icons
Here's an example of icon-based fonts in action: http://css-tricks.com/examples/IconFont/
I can think of three ways to do this.
Create a sprite sheet with all the different colors you need, and shift offsets to change colors. This is kinda cheating.
Dynamically generate the image using Canvas (ugh!)
Use SVG, which will respond to changes to the CSS similar to changing text display by changing the class on the DIV/SPAN
With SVG icons you can do whatever you want :)
Here's an example with the Raphael JS Library:
http://raphaeljs.com/icons/
You could generate just 4 star images: 1 black, 1 red, 1 blue and 1 green (maybe 1 white too, if you have a non-white background). Then stack all of them and play with their opacity to obtain the color you want.