Saving two BufferedImages within a LayeredPane

Question

I am working with a LayeredPane that contains two images, one on each layer. I have been working on a method that obtains the image positions (based on the label positions the images are in) and then save the bottom image (lower one from within the layeredPane) and also the top one if it is at all covering the bottom image (may only be a part of the image), however I have been having some trouble with this and I'm a bit unsure on how to get it working properly.

I have been stuck working on this for quite a while now so any help with my existing code or thoughts on how I should approach this another way would be a big help for me.

Thanks in advance.

public void saveImageLayering(BufferedImage topImg,BufferedImage bottomImg, JLabel topLabel, JLabel bottomLabel) {
    int width = bottomImg.getWidth();
    int height = bottomImg.getHeight();
    Point bottomPoint = new Point();
    Point topPoint = new Point();

    bottomPoint = bottomLabel.getLocation();
    topPoint = topLabel.getLocation();  

    System.out.println("image x coordinate " + bottomPoint.x);
    System.out.println("image y coordinate " + bottomPoint.y);  

    //arrays to store the bottom image
    int bottomRedImgArray[][] = new int[width][height];
    int bottomGreenImgArray[][] = new int[width][height];
    int bottomBlueImgArray[][] = new int[width][height];

    //arrays to store the top image
    int topRedImgArray[][] = new int[width][height];
    int topGreenImgArray[][] = new int[width][height];
    int topBlueImgArray[][] = new int[width][height];

    //loop through the bottom image and get all pixels rgb values
    for(int i = bottomPoint.x; i < width; i++){
        for(int j = bottomPoint.y; j < height; j++){
            //set pixel equal to the RGB value of the pixel being looked at
            pixel = new Color(bottomImg.getRGB(i, j));
            //contain the RGB values in the respective RGB arrays
            bottomRedImgArray[i][j] = pixel.getRed();
            bottomGreenImgArray[i][j] = pixel.getGreen();
            bottomBlueImgArray[i][j] = pixel.getBlue();
        }   
    }
    //create new image the same size as old
    BufferedImage newBottomImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

    //set values within the 2d array to the new image
    for (int x1 = 0; x1 < width; x1++){
        for (int y1 = 0; y1 < height; y1++){
            //putting values back into buffered image
            int newPixel = (int) bottomRedImgArray[x1][y1];
            newPixel = (newPixel << 8) + (int) bottomGreenImgArray[x1][y1];
            newPixel = (newPixel << 8) + (int) bottomBlueImgArray[x1][y1];
            newBottomImage.setRGB(x1, y1, newPixel);
        }
    }

    //create rectangle around bottom image to check if coordinates of top in inside and save only the ones that are
    Rectangle rec = new Rectangle(bottomPoint.x, bottomPoint.y, bottomImg.getWidth(), bottomImg.getHeight());

    //loop through the top image and get all pixels rgb values 
    for(int i = bottomPoint.x; i < bottomImg.getWidth(); i++){
        for(int j = bottomPoint.y; j < bottomImg.getHeight(); j++){

            //if top image is inside lower image then getRGB values
            if (rec.contains(topPoint)) { //___________________________________________________________doesnt contain any..
                if (firstPointFound  == true) {
                    //set pixel equal to the RGB value of the pixel being looked at
                    pixel = new Color(topImg.getRGB(i, j));
                    //contain the RGB values in the respective RGB arrays
                    topRedImgArray[i][j] = pixel.getRed();
                    topGreenImgArray[i][j] = pixel.getGreen();
                    topBlueImgArray[i][j] = pixel.getBlue();
                } else {
                    firstPoint = new Point(i, j);
                    firstPointFound = true;
                }
            }
        }
    }
    //create new image the same size as old
    BufferedImage newTopImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

    //set values within the 2d array to the new image
    for (int x1 = 0; x1 < topImg.getWidth(); x1++){
        for (int y1 = 0; y1 < topImg.getHeight(); y1++){
            //putting values back into buffered image
            int newPixel = (int) topRedImgArray[x1][y1];
            newPixel = (newPixel << 8) + (int) topGreenImgArray[x1][y1];
            newPixel = (newPixel << 8) + (int) topBlueImgArray[x1][y1];
            newTopImage.setRGB(x1, y1, newPixel);
        }
    }

    BufferedImage newImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); 

    //uses the Graphics.drawImage() to place them on top of each other
    Graphics g = newImage.getGraphics();
    g.drawImage(newBottomImage, bottomPoint.x, bottomPoint.y, null);
    g.drawImage(newTopImage, firstPoint.x, firstPoint.y, null);

    try {
        //then save as image once all in correct order
        File outputfile = new File("saved_Layered_Image.png");
        ImageIO.write(newImage, "png", outputfile);
        JOptionPane.showMessageDialog(null, "New image saved successfully");
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Answer 1

I'm not really sure why you're messing around with the pixels, however, the idea is relatively simple

Basically, you want to create a third "merged" image which is the same size as the bottomImage. From there, you simply want to paint the bottomImage onto the merged image at 0x0.

Then you need to calculate the distance that the topImage is away from bottomImage's location and paint it at that point.

BufferedImage merged = new BufferedImage(bottomImg.getWidth(), bottomImg.getHeight(), BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = master.createGraphics();
g2d.drawImage(bottomImg, 0, 0, this);

int x = topPoint .x - bottomPoint .x;
int y = topPoint .y - bottomPoint .y;

g2d.drawImage(topImg, x, y, this);
g2d.dispose();

Using this basic idea, I was able to produce these...