overlay images in java

Question

I hope you can give me some advices to solve my problem. I need to overlay many images on a button.but the problem is, this is the base image (tooth): (http://i.imgur.com/7tIcP.gif)

my first image is this: http://i.imgur.com/FYuD8.gif and then I put this: http://i.imgur.com/mWz9c.gif the first image overlaps the second so I just can see only the second image...

maybe you will tell me that one option is change the order of the image before overlay, but the user will select what will be the first, maybe just want the first image, but in other cases user will put the first AND then the second or vice versa...

my code is this:

    BufferedImage large=null;
    large = ImageIO.read(new File("firstimage.gif"));

    BufferedImage small=null;

    small = ImageIO.read(new File("secondimage.gif"));

    int w = Math.max(large.getWidth(), small.getWidth());
    int h = Math.max(large.getHeight(), small.getHeight());

    BufferedImage combined = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);

    // paint both images, preserving the alpha channels
    Graphics g = combined.getGraphics();
    g.drawImage(large, 0, 0, null);
    g.drawImage(small, 0, 0, null);

    ImageIO.write(combined, "PNG", new File("twoInOne.png"));

    ImageIcon icon1 = new ImageIcon(combined);
    jbutton1.setIcon(icon1);

Maybe is a format of the images issue, or my code, but I prefer that you guys can help me with this problem thank you.

Now I uploaded the 3 images: I skip the base image (tooth) cause I dont think it will be the problem in there.

Answer 1

I need to edit my images to get transparent background?

To make a particular color transparent, you can iterate through the pixels of a BufferedImage or use a suitable LookupOp. For the latter, see the articles cited here. You can then combine the images using drawImage(). The default composite rule, AlphaComposite.SRC_OVER, should be satisfactory; if not, you can change it, as shown here.

Answer 2

Your code should be fine for combining two images together. However, like you said, your two images are of the same size, and they do not seem to have any transparency. This will cause whatever image is drawn second to always "overwrite" the first image in the newly-combined image.

The solution you probably want for this, is to break the various pieces you want to overlay on top of each other out into separate, smaller images. With your images, it looks like you want to have various overlays on top of a tooth to display various pieces of information. You'll want to have three things in this case: an image of a tooth, an image containing the red overlay, and an image containing the blue overlay. All three of these images should have a transparent, and not white, background so that they don't overwrite colors in any previously-drawn image. When you do this, you'll want to draw the tooth, then overlay 1 (red/blue) then overlay 2 (red/blue). This should get you the output you're looking for.

Answer 3

The key is to set the alpha to float value, say two layer, set alpha to 0.5, three layer, set alpha 0.33, four layer, set alpha 0.25 ... Anyway, here is the code example

try
{
    BufferedImage imgA = ImageIO.read(new File(imgAPath, token));
    BufferedImage imgB = ImageIO.read(new File(imgBPath, token));

    if (imgA.getWidth() == imgB.getWidth() && imgA.getHeight() == imgB.getHeight()) 
    {
        float alpha = 0.5f;
        int compositeRule = AlphaComposite.SRC_OVER;
        AlphaComposite ac;
        int imgW = imgA.getWidth();
        int imgH = imgA.getHeight();
        BufferedImage overlay = new BufferedImage(imgW, imgH, BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = overlay.createGraphics();
        ac = AlphaComposite.getInstance(compositeRule, alpha);
        g.drawImage(imgA,0,0,null);
        g.setComposite(ac);
        g.drawImage(imgB,0,0,null);
        g.setComposite(ac);
        ImageIO.write(overlay, "PNG", new File(logFolder, browser+"__"+token));
        g.dispose();
    }
    else
    {
        System.err.println(token+" dymension not match ");
    }
}
catch (IOException e)
{
}