Legacy ImageMagick Discussions Archive

For a while now, I've been creating custom-colored icons on the fly with ImageMagick 6.2.7 by overlaying a colored square onto a black-and-white icon that's a PNG with an alpha channel, and it's worked flawlessly. But I just got a new MacBook Pro with Mac OS X.5 and installed IM 6.3.9, and now it doesn't work. Here's the exact command I'm using:

convert white.png xc:red -resize 13x13! white.png -compose multiply -composite red.png

And here's the result in the two versions of ImageMagick (I did Photoshop screen shots so you can visualize the transparency, or lack thereof):



Did something change in ImageMagick, or is there a bug in its implementation in Mac OS Leopard? Is there better way I could do this?

The default filters for -resize have change. To get back what you had use -filter point before -resize

see http://www.imagemagick.org/Usage/resize/#filter for more info on filters for resize

I just tried adding -filter point and it had no effect. Wouldn't that just affect how the initial red area is sized up to 13x13?

I did discover that I could re-create my old conversion by using "atop" instead of "multiply" -- but atop does something different in 6.2.7. Ideally, I want a solution that will work independent (more or less) of the IM version!

Yes, I misunderstood the situation. Sorry. Now that I look at it more carefully, I am not sure why your original method worked at all, however, I am new to IM at 6.3.5 and don't know what it was like under 6.2.7

I assume that your white.png image is 13x13 in size and has a checkerboard background that is not transparent, a black triangle with white inside for which there is an alpha channel for the white triangle area and not the black triangle . Correct me if I am wrong. If this is the correct situation, then I believe you want to do

convert \( -size 13x13 xc:red \) white.png -compose over -composite red.png

(As -compose over is the default at least now, then this is currently equivalent to
convert \( -size 13x13 xc:red \) white.png -composite red.png)

The \( and \) may not be needed, but I have put them there to be sure.

Try
convert \( -size 13x13 xc:red \) white.png -compose over -composite red.png

and let us know if that works in both versions of IM.

I think you've misunderstood the nature of the original images. The "checkerboard" portion of the original is actually transparent; I just took a screen shot of how it looks in Photoshop, so it would be clear what the alpha channel was doing. (If you look closely, you'll see that the checkerboard doesn't line up with the pixels!)

So, in English: I have a white triangle with a black border and a transparent background. I want to overlay red (or any arbitrary color) onto the white graphic in some kind of "multiply"-like mode so that the alpha channel from the original graphic is preserved but the white part gets overlain by a color.

Here's the original white triangle:

And here's what I want it to look like after processing it with ImageMagick:

Here are 3 methods that seem to work for me on IM 6.3.8

convert triangle_white.png -fuzz 20% -fill red -opaque white triangle_red_new1.png

convert triangle_white.png \( -size 13x13 xc:red \) \( -clone 0 -channel RGBA -fill black -opaque none -transparent white \) \
-compose over -composite triangle_red_new2.png

convert triangle_white.png \( -size 13x13 xc:red \) \( -clone 0 -channel RGBA -fill black -opaque none -transparent white \) \
-compose multiply -composite triangle_red_new3.png


In the first method I am simply replacing colors that are within 20% of being pure white with red. If you leave off the -fuzz 20%, then you see some near white inside the black triangle. I am not sure what the acceptable range of percentage might be as I did not test it well. But 20% worked fine.

In the second and third methods, I am creating a mask image from your triangle_white.png where I convert transparent to black and then make white transparent. -compose multiply and -compose over seem to both work fine.

Let us know if any or all of these work in IM 6.2.7 as well as your current IM.

Nope, not quite. All of the commands you listed leave "rough"-looking results; the anti-aliasing is gone because we've ONLY affected the pixels that were formerly white. I need to use some kind of "multiply" effect so that not only do the white pixels become red, but the gray pixels get overwritten by red and become dark red. (The black pixels are overwritten by red as well, but of course they remain black.)

What I need is the equivalent of telling Photoshop, "Fill this image with red, in Multiply mode, but preserve the layer's transparency (alpha channel)." Surely that's relatively simple in ImageMagick, but I don't understand IM's syntax well enough to make it work.

This seems to reproduce your result upon magnification inspection (however, I like the others better, personally).

convert triangle_white.png \( -size 13x13 xc:red \) \
\( -clone 0 -channel RGBA -fill black -opaque none -threshold 0 \) \
-compose multiply -composite triangle_red_new4.png


The third image is again a mask, but this time it is binary. Where it was transparent it is now black and where it was not transparent it is now white.

Try this and let us know.

Nope. Now it's got red fringe around the outside; it seems the alpha channel is either 100% or 0%, which is not what I want.

Argh, this shouldn't be so hard. We have two images: a white anti-aliased triangle with a black border, and a solid square of red. We need to add the red square on top of the white square in "multiply" mode, but we then need to re-apply the anti-aliased mask/alpha channel from the original white triangle. How do we translate these instructions to IM syntax?

OK, here it is - two ways:

convert \( -size 13x13 xc:red triangle_white.png -compose multiply -composite \) \
\( triangle_white.png -channel A -negate -separate \) \
-compose Copy_Opacity -composite triangle_red_new.png

convert triangle_white.png \
\( -clone 0 -size 13x13 xc:red -compose multiply -composite \) \
\( -clone 0 -channel A -negate -separate \) \
-delete 0 -compose Copy_Opacity -composite triangle_red_new1.png

The second way simply avoids having to specify the image name twice.

The -compose Copy_Opacity -composite gets the alpha channel (which seems to need negating) from the previous step and applies it to the image created by multiplying the red background by the original

I think that'll work! It's not coming out EXACTLY the same as "multiply" under IM 6.2.7 -- it looks like that was actually doubling the alpha channel so that 50% was coming out as 75%, 40% became 64%, etc. -- but it'll work fine.

Interestingly, the two methods you concocted do not yield identical results for some reason... but they are close enough that the naked eye can't see the difference.

Thanks for your help!

Yes, it probably does double the alpha channel effect as I had to extract the alpha channel and reapply it to the result of the first multiply. I did not do an exact analysis, but simply a visual comparison and it looked the same. As to why the second does not give the same as the first, I will have to look further into that.

fmw42 wrote:Yes, it probably does double the alpha channel effect as I had to extract the alpha channel and reapply it to the result of the first multiply. I did not do an exact analysis, but simply a visual comparison and it looked the same. As to why the second does not give the same as the first, I will have to look further into that.

No, the 6.2.7 method ("multiply") was doubling the alpha channel; what you came up with copies it exactly -- which is probably the desired behavior anyway.

As for the difference between the two methods, I'm going to use the first one (the one that uses the filename twice); the "gray" areas (neither full red nor black) come out just a hair darker in that version.

I don't see any difference between the two methods:

compare -metric rmse triangle_red_new.png triangle_red_new1.png null:
0 (0)

You're right; when I open them in Photoshop they're identical. But Firefox (and Safari) displays them slightly differently; why would that be?