Possible to blend an image into a color? (Left, right, bottom)

Question

Is it possible to blend the left, right and bottom sides of an image into a color?
Lets say, I want the image to be blended into the color "#F0F0F0". I want the image to appear as an actual part of the background, so I thought it would look cool if it was blended in.

Answer 1

You can do this by using an image-manipulation library like ImageMagick or GD. I found this page where the author uses a gradient to perform blending using GD.

You can also try using Imagick::colorizeimage

UPDATE

Based on your screenshot, I don't see why you couldn't do what you wanted to with just straight HTML+CSS. You can either use a transparent PNG or you can use -moz-opacity, opacity or filter:alpha in your CSS (Cross-browser Transparency via CSS).

Answer 2

If this is just for a webpage this is possible using basic HTML+CSS. Just like you said, you could use a PNG as a layover (via a carefully positioned <div>) on your background.

Otherwise, look into the ImageMagick Libraries for PHP, as they'll let you programmatically create a blended image like you describe. (Imagick::colorizeImage)

Answer 3

You would have to manipulate the pixeldata of the image to achieve this but once you have that covered its not really a problem. Take the color value of the pixel and blend it with your blendcolor. There are some pretty standard maths that can do it fairly well such as this algorithm value1 + (value2 - value1) * amount often used in pixelshaders when doing multi-texturing.

As others have said image libraries for php such as GD helps out with the data manipulation of the image as you won't have to decode and encode it yourself

Answer 4

I don't know what you need exactly, but using a semi-transparent png as an overlay you can do a lot as well without the need to manipulate your original images.

Answer 5

i suggest you use verot's upload php class. It contains all currently available serverside manipulation functions dealing with image (rotate, tint, frame color, background color, etc.).

See this sample code:

$foo->image_resize          = true;
$foo->image_ratio_fill      = 'R';
$foo->image_y               = 150;
$foo->image_x               = 100;
$foo->image_background_color = '#FF00FF';
$foo->image_rotate          = '90';