Skip to content

Color overlay #96

Closed
nickdaugherty opened this Issue Jan 28, 2012 · 7 comments

2 participants

@nickdaugherty

I can't tell from the docs if this is possible, but I would like to overlay a png with a solid color, while maintaining transparency.

This feature would be useful for changing the color of icons on the fly. Is this currently possible?

@avalanche123
Owner

yes, it is possible

<?php

$image   = $imagine->open('/path/to/image/to/be/overlayed.jpg');
$overlay = $imagine->create($image->getSize(), new Imagine\Image\Color('#fff', 50));

$image
  ->paste($overlay, new Imagine\Image\Point(0,0))
  ->save('/path/to/overlayed/image.jpg')
;
@nickdaugherty
@avalanche123
Owner

It will, Imagine is designed to be intuitive and takes care of those dirty details

@avalanche123
Owner

Oh, you don't mean to overlay it, you mean to fill the background. In that case:

<?php

$image  = $imagine->open('/path/to/image/to/be/overlayed.jpg');
$canvas = $imagine->create($image->getSize(), new Imagine\Image\Color('#fff'));

$canvas
  ->paste($image, new Imagine\Image\Point(0,0))
  ->save('/path/to/overlayed/image.jpg')
;
@nickdaugherty

Thanks for the responses. I do actually want to overlay a png with a new color, not set the background. For example, I want to take a grey png icon that has a transparent background, and overlay a new color so that it changes the icon's color, but keeps the background transparent so the icon is still visible.

I tried your code from the first comment, but it did not retain the transparent background...it filled the entire image with white.

@avalanche123
Owner

yes, that makes sense. I thought you wanted to change background or overlay the whole image with semi-transparent color. in case you wanted to overlay only the icon part of the image, you want to use a custom fill class that implements https://github.com/avalanche123/Imagine/blob/develop/lib/Imagine/Image/Fill/FillInterface.php and for every position, you could determine if color of the image is transparent and overlay it if not. This will perform quite badly though. Alternatively you could create a black and white version of your icons and then overlay original ones and apply masks using b&w shapes

@nickdaugherty

Alright thanks, I'll check out those methods.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.