Color overlay with opacity using ImageMagick in Rails

Question

We are trying to apply an overlay to a series of images before combining them into one. Now it seems that imagemagick converts the image to a color that is used instead of applying an overlay. The documents are not very clear about what we should do differently. I would be grateful if you have any ideas on this. Code follows:

def self.concatenate_images (source, image) height = FastImage.size(image.url)[0] width = FastImage.size(image.url)[1] source = source.first source = source.resize_to_fill(height, width).quantize(256, Magick::GRAYColorspace).contrast(true) User.color_variant.each_slice(3).with_index do |slice,variant_index| slice.each_with_index do |color,color_index| colored = Magick::Image.new(height, width) { self.background_color = color.keys[0]} colored.composite!(source.negate, 0, 0, Magick::CopyOpacityCompositeOp) colored.write("#{User.get_img_path}#{color.values[0]}.png") if variant_index == 2 && color_index == 0 system "convert #{User.get_img_path}#{slice[0].values[0]}.png #{image.url} +append #{User.get_img_path}#{slice[0].values[0]}.png" end if color_index!=0 && variant_index != 3 system "convert #{User.get_img_path}#{slice[0].values[0]}.png #{User.get_img_path}#{slice[color_index].values[0]}.png +append #{User.get_img_path}#{slice[0].values[0]}.png" end end end 

Answer 1

I'm not talking about Ruby, but I suspect that you have the wrong blending mode. On the command line, you can see the available blending modes with:

 identify -list compose 

Output

 Atop Blend Blur Bumpmap ChangeMask Clear ColorBurn ColorDodge Colorize CopyBlack CopyBlue CopyCyan CopyGreen Copy CopyMagenta CopyOpacity CopyRed CopyYellow Darken DarkenIntensity DivideDst DivideSrc Dst Difference Displace Dissolve Distort DstAtop DstIn DstOut DstOver Exclusion HardLight HardMix Hue In Lighten LightenIntensity LinearBurn LinearDodge LinearLight Luminize Mathematics MinusDst MinusSrc Modulate ModulusAdd ModulusSubtract Multiply None Out Overlay Over PegtopLight PinLight Plus Replace Saturate Screen SoftLight Src SrcAtop SrcIn SrcOut SrcOver VividLight Xor 

I expect you to see something like this if you look at the file where your Magick::CopyOpacityCompositeOp . So, if I take Mr Bean and a magenta rectangle of the same size:

I can run the command as follows:

 convert MrBean.jpg overlay.png -compose blend -composite output.jpg 

and I will get this:

Now this may or may not be what you want, so I can run all the available blending modes, for example:

 for blend in $(identify -list compose|grep -v Blur ); do convert -label "$blend" MrBean2.jpg overlay.png -compose $blend -composite miff:- done | montage - -tile 5x result.png 

which gives this, which shows various results:

Answer 2

I am not in RoR, but I believe that you replace your image with a solid color, instead of overlaying the image, because the composite Copy_Opacity method replaces the alpha channel ( Copy_Opacity method ).

Instead:

 colored = Magick::Image.new(height, width) { self.background_color = color.keys[0]} colored.composite!(source.negate, 0, 0, Magick::CopyOpacityCompositeOp) 

Try the following:

 colored = Magick::Image.new(height, width) { self.background_color = color.keys[0]} your_overlayed_image.composite!(colored, 0, 0, Magick::ColorizeCompositeOp) 

See Alpha Compositing (RMagick) - Coloring a Compound Operation