Search code examples
javapngtransparencyjava-meimage-scaling

Custom method to rescale a PNG loses transparency


Hey folks, I am working on a j2ME game for java-capable cell phones. I am attempting to scale a transparent PNG with the following method:

// method derived from a Snippet from http://snippets.dzone.com/posts/show/3257
// scales an image according to the ratios given as parameters

private Image rescaleImage(Image image, double XRatio, double YRatio)
{
    // the old height and width
    int sourceWidth = image.getWidth();
    int sourceHeight = image.getHeight();

    // what the new height and width should be
    int newWidth = (int)(XRatio * sourceWidth);
    int newHeight = (int)(YRatio * sourceHeight);

    Image newImage = Image.createImage(newWidth, newHeight);
    Graphics g = newImage.getGraphics();

    for (int y = 0; y < newHeight; y++)
    {
        for (int x = 0; x < newWidth; x++)
        {
            g.setClip(x, y, 1, 1);
            int dx = (x * sourceWidth) / newWidth;
            int dy = (y * sourceHeight) / newHeight;
            g.drawImage(image, (x - dx), (y - dy), Graphics.LEFT | Graphics.TOP);
        }
    }
    return Image.createImage(newImage);
}

It scales the image correctly, unfortunately I seem to be losing the transparency with the image returned by the method. I am fairly new to these concepts, and any help would be greatly appreciated! Please note that in order to be properly displayed on any java-capable mobile device, the rescaling needs to be done in code, not in any sort of image editor.

Thanks in advance!


Solution

  • Thanks to everyone who has been looking for solutions to this seemingly wide-spread and unsolved problem. I managed to find a great solution at http://willperone.net/Code/codescaling.php

    You just change the "false" in the createRGBImage parameter to a true. This flags the method to process the high-order bits of each pixel as alpha values. Here is my implementation, not much change from the original link above.

    XRatio and YRatio are declared as constants when the canvas is initialized, where XRatio = this.getWidth() (the current phone's screen width) divided by your original background image width, and YRatio with getHeight() / original background image height.

    // RESCALEIMAGE
    // scales an image according to the ratios given as parameters
    // derived from http://willperone.net/Code/codescaling.php
    
    public static Image rescaleImage(Image original, double XRatio, double YRatio)
    {
        // the original width and height
        int originalWidth = original.getWidth();
        int originalHeight = original.getHeight();
    
        // the target width and height
        int newWidth = (int)(XRatio * originalWidth);
        int newHeight = (int)(YRatio * originalHeight);
    
        // create and fill the pixel array from the original image
        int[] rawInput = new int[originalHeight * originalWidth];
        original.getRGB(rawInput, 0, originalWidth, 0, 0, originalWidth, originalHeight);
    
        // pixel array for the target image
        int[] rawOutput = new int[newWidth*newHeight];
    
        // YD compensates for the x loop by subtracting the width back out
        int YD = (originalHeight / newHeight) * originalWidth - originalWidth;
        int YR = originalHeight % newHeight;
        int XD = originalWidth / newWidth;
        int XR = originalWidth % newWidth;
        int outOffset= 0;
        int inOffset=  0;
    
        for (int y = newHeight, YE = 0; y > 0; y--)
        {
            for (int x = newWidth, XE = 0; x > 0; x--)
            {
                rawOutput[outOffset++] = rawInput[inOffset];
    
                inOffset += XD;
                XE += XR;
    
                if (XE >= newWidth)
                {
                    XE -= newWidth;
                    inOffset++;
                }
            }
    
            inOffset += YD;
            YE += YR;
    
            if (YE >= newHeight)
            {
                YE -= newHeight;
                inOffset += originalWidth;
            }
        }
        return Image.createRGBImage(rawOutput, newWidth, newHeight, true);
    }