Resizing Actionscript images with bicubic or bilinear interpolation

I’ve had a few people contact me to ask about how to use clevrlib to resize images with bicubic or bilinear interpolation in Flash or Flex, so I’ll give an overview of how to do this.

The InterpolatedBitmapData class adds the methods getPixelBicubic and getPixelBilinear to the BitmapData class, which allows you to fetch the colour of a point that’s not on a pixel boundary. We use this when reprojecting the source images in the CleVR Stitcher, but it can work just as well for resizing an image. Bear in mind that bicubic is a lot slower than bilinear, and the quality improvement isn’t usually worthwhile. However, you’re welcome to switch to getPixelBicubic if you need to.

The basic method I’m using here for resizing is to loop through the pixels of the output image, getting the equivalent pixels in the source image. As these are found by multiplying by the ratio between the source and output sizes, the coordinates probably won’t be integers. Using regular getPixel would require rounding, and therefore give a jagged (aliased) output. The getPixelXxx methods let you pass them a Number, which needn’t be an integer, giving a much smoother result.

The sample code below shows a way of resizing an image using this method. The InterpolatedBitmapData should be created in the same way as a BitmapData, such as by draw()ing a loader onto it. The example I’ve shown below is an Event.COMPLETE handler for a Loader. Code below the cut.

var source:IBitmapDrawable = event.target.loader;
 
var original:InterpolatedBitmapData = new InterpolatedBitmapData(source.width, source.height);
original.draw(source);
 
/* The size of the output image */
var newWidth:int = 100;
var newHeight:int = 200;
 
var resized:BitmapData = new BitmapData(newWidth, newHeight);
 
var xFactor:Number = original.width / newWidth;
var yFactor:Number = original.height / newHeight;
 
/* Loop through the pixels of the output image, fetching the equivalent pixel from the input*/
for (var x:int = 0; x < newWidth; x++) {
    for (var y:int = 0; y < newHeight; y++) {
        resized.setPixel(x, y, original.getPixelBilinear(x * xFactor, y * yFactor));
    }
}

16 Responses to “Resizing Actionscript images with bicubic or bilinear interpolation”

  1. Mark Says:

    Brilliant, thanks again Matt!

  2. renderhjs Says:

    many thanks as well,- I just started today with a texture slicer that cuts out planar textures out of regular perspective photos or drawings.

    This class helped me getting smooth results when transforming Cyclic Quadrilateral shapes to regular rectangluar ones (like the perspective transform in PS but reversed)- before this edges were pixelated.

    will add a link as soon as I have running demos online.

  3. Cafe Silencio » Blog Archive » » Image resize quality in Flex and Air Says:

    [...] I ran across a partial solution. Over at clevr.com they have written a bicubic and bilinear resizing algorithm to be used in actionscript. While not a [...]

  4. Nick Bilyk Says:

    I tried it out, but the results were much worse and pixelated than Flash’s default resizing. Is there an online example of it in action I can see?

  5. Prasanta Saha Says:

    it worked for me well, thanks a lot :)

  6. Kun Janos Says:

    The given method didn’t work for me. The image was even worse then the original resize from Flex.
    I worked around the issue, using bluring, check it here http://kun-janos.ro/blog/?p=107

  7. Bilinear Resampling With Flash Player and Pixel Bender Says:

    [...] you dig around long enough on the net you’ll find some AS3 libraries (Java ports) like cleverlib which will do bilinear or bicubic resampling using BitmapData methods like getPixel / setPixel. As [...]

  8. Erik Says:

    Do you know what scaling function is used for bitmapdata.draw with and without smooth?

  9. Try/Catch Slowdown: Part 2 « JacksonDunstan.com Says:

    [...] on a large, but not unreasonably large, BitmapData. Such a task is undertaken by image encoders, bicubic image resizers, and ray tracers, to name a couple of examples. My example won’t do anything interesting with [...]

  10. Robinson Says:

    Thats great. Exactly what i`ve been searching for. Thanks a lot!

  11. Minh Tran Says:

    this does not work again resized image’s size = 16×16. image produced still very pixelate.

    who know the workaround ?

  12. developer Says:

    Good post :-) Sanks!

  13. Mac Adobe Says:

    Mac Adobe…

    [...]CleVR » Panoramic photography and image stitching blog » Blog Archive » Resizing Actionscript images with bicubic or bilinear interpolation[...]…

  14. thanks for good information Says:

    thanks for good information…

    [...]CleVR » Panoramic photography and image stitching blog » Blog Archive » Resizing Actionscript images with bicubic or bilinear interpolation[...]…

  15. PaperCraft Says:

    PaperCraft…

    [...]CleVR » Panoramic photography and image stitching blog » Blog Archive » Resizing Actionscript images with bicubic or bilinear interpolation[...]…

  16. Paneon Says:

    Thanks, glad I found this !

Leave a Reply