Trim whitespace around a transparent PNG

Question

So, I've managed to get myself stuck in a situation where a database full of images ( transparent images of various products ) needs to be placed on the stage, all of which need to be aligned the same by the products height.

My problem is that the png's of products are 'floating' and I have no control of where about's in the png it will sit ( could be tight at the top and loads of room at the bottom, vice versa)

Does anyone know an existing way to find out the png's 'true' height ( width is an extra ). I've thought about looping through the bitmap data and checking but wondered if anyone has invented this wheel already?

eg Example with room at top / Example with none, really

Answer 1

Hi Karl, you can use the method of the BitmapData class getColorBoundsRect() to get the rectangle of non-transparent content. The documentation gives this example too:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html

Thanks, Alistair

Answer 2

Not hard. I mean - there's probably many people that were doing that... Just... they don't share - because it's VERY simple.

You have to loop through X and Y and if the pixel is NOT transparent, check if the var $xmin is smaller, if not, set $xmin to X. Then check if $xmax is bigger, if not, set $xmax to X. So goes for Y. You can add extra margin by just increasing the $xmin, $ymin, $xmax, $ymax values.

Answer 3

As Alistair says, the getColorBoundsRect will ultimately be your best option.

I haven't looked into it too much, but I'm not sure if getColorBoundsRect allows you to "select all non 100% alpha-ed pixels". If it doesn't you can easily use the BitmapData.threshold method to get you to that stage.

I'd do something like duplicate the bitmap, run the threshold method on it turning all non alpha-ed pixels bright green, then run getColorBoundsRect selecting all the green pixels you just created.

Answer 4

The solution I eventually came to was the below, most likely not the most performant way but it works.

    /**
     * Cuts off the transparency around a bitmap, returning the true width and height whilst retaining transparency
     *  
     * @param input Bitmap
     * 
     */
    private function trimTransparency(input:BitmapData,colourChecker:uint = 0x00FF00):Bitmap {

        //Keep a copy of the original
        var orignal:Bitmap = new Bitmap(input);

        //Clone the orignal with a white background
        var clone:BitmapData = new BitmapData(orignal.width, orignal.height,true,colourChecker);
        clone.draw(orignal);

        //Grab the bounds of the clone checking against white
        var bounds:Rectangle = clone.getColorBoundsRect(colourChecker, colourChecker, false);

        //Create a new bitmap to return the changed bitmap
        var returnedBitmap:Bitmap = new Bitmap();
        returnedBitmap.bitmapData = new BitmapData(bounds.width, bounds.height,true,0x00000000);
        returnedBitmap.bitmapData.copyPixels(orignal.bitmapData,bounds, new Point(0,0));    
        return returnedBitmap;


    }