«
»

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));
    }
}

This entry was posted on Thursday, July 10th, 2008 at 8:19 am GMT and is filed under Actionscript, Adobe, CleVR, clevrlib, Flash, Flex, graphics, image processing, math, maths. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

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

  1. Mark Says:
    July 10th, 2008 at 12:27 pm GMT

    Brilliant, thanks again Matt!

  2. renderhjs Says:
    July 28th, 2008 at 4:26 am GMT

    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:
    October 2nd, 2008 at 9:51 pm GMT

    [...] 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:
    November 7th, 2008 at 4:11 am GMT

    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:
    January 11th, 2009 at 3:10 am GMT

    it worked for me well, thanks a lot :)

  6. Kun Janos Says:
    March 9th, 2009 at 3:56 pm GMT

    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:
    March 12th, 2009 at 4:09 am GMT

    [...] 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:
    April 23rd, 2009 at 3:48 pm GMT

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

  9. Try/Catch Slowdown: Part 2 « JacksonDunstan.com Says:
    October 16th, 2009 at 9:05 am GMT

    [...] 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:
    December 4th, 2009 at 11:04 pm GMT

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

  11. Minh Tran Says:
    February 8th, 2010 at 8:06 pm GMT

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

    who know the workaround ?

  12. developer Says:
    May 5th, 2011 at 8:53 am GMT

    Good post :-) Sanks!

  13. Mac Adobe Says:
    December 29th, 2011 at 9:28 am GMT

    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:
    January 26th, 2012 at 2:22 pm GMT

    thanks for good information…

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

  15. PaperCraft Says:
    April 30th, 2012 at 11:47 pm GMT

    PaperCraft…

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

  16. Paneon Says:
    March 7th, 2013 at 9:11 pm GMT

    Thanks, glad I found this !

Leave a Reply