Home > Code > Image Resizing and Cropping Utility – AS3

Image Resizing and Cropping Utility – AS3

August 29th, 2008 shaun Leave a comment Go to comments

UPDATE: Aha, here we go, this looks much better: Fit Display Object Into Rectange
UPDATE: Or check out CASA lib: http://casalib.org/

A day or two ago my man Kyle asked me if I knew of any good ActionScript image resizing utilities. I said “nay”, did a quick (and unsuccessful) search, and promptly forgot about it. This morning, however, I had to write some PHP to scale and crop images to fit inside fixed rectangles (for desktop downloads) and I remembered that I’d written something to do that very thing many years ago. I found my old code, tweaked it, and rolled it out.

This evening I decided to write an AS3 version – I’ll need it soon enough anyhow. Herewith, my Display Utility containing two static methods: resize(), and resizeAndCrop().

DisplayUtil.resize() will scale a DisplayObject to a target size, with an optional fourth parameter to determine whether the image should fit “inside” (default) or “outside” the target size. For example:

var fitInside:Boolean = false;
DisplayUtil.resize( pic, 400, 300, fitInside );

DisplayUtil.resizeAndCrop() will scale a DisplayObject to fit “outside” a target size and then crop off the excess (by setting a scrollRect on the DisplayObject). The optional fourth and fifth parameters determine how to align the crop (the area to keep – defaults to center, middle). For example:

var ha:String = DisplayUtil.ALIGN_RIGHT;
var va:String = DisplayUtil.ALIGN_BOTTOM;
DisplayUtil.resizeAndCrop( pic, 400, 300, ha, va );

Download:

displayutil.zip

Disclaimer: I’m absolutely sure that someone has already written something to do this, but I couldn’t find anything easily (quickly) enough, and it was fun to write.

UPDATE: Aha, here we go, this looks much better: http://blog.soulwire.co.uk/flash/actionscript-3/fit-a-displayobject-into-a-rectangle/
UPDATE: Or check out CASA lib: http://casalib.org/

Categories: Code Tags: , , , ,
  • http://www.simstim.co.za/chiba simstim

    sick titty bone dogs! Thanks! :)

  • http://www.simstim.co.za/chiba simstim

    sick titty bone dogs! Thanks! :)

  • http://shaun.boyblack.co.za/blog/2008/08/29/image-resizing-and-cropping-utility-as3-demo/ shaun smith » Blog Archive » Image Resizing and Cropping Utility – AS3 Demo

    [...] shaun smith web developer – cape town, south africa « Image Resizing and Cropping Utility – AS3 [...]

  • http://www.rigardkruger.com/ Rigard Kruger

    Thanks, cowboy. It’s the simple little things in life that we appreciate the most. Very useful bit of code – will come in handy often, guaranteed.

  • http://www.rigardkruger.com Rigard Kruger

    Thanks, cowboy. It’s the simple little things in life that we appreciate the most. Very useful bit of code – will come in handy often, guaranteed.

  • http://www.boyblack.co.za shaun

    Heh, no problemo! Glad to be of assistance.

  • http://www.rigardkruger.com/ Rigard Kruger

    One thing about your resize and crop function, tho, is that it’s tricky when you are trying to read the resultant dimension values. Using a scrollrect on a displayobject does not literally crop the item, meaning that when you access its width and height, you still get returned its original width and height (after the resizing bit obviously). This could generally turn into a bit of an issue, seeing that you might want to center the resized-cropped item by doing something along the lines of:

    item.x = -item.width / 2;
    item.y = -item.height / 2;

    This code would be fine if it was actually cropped, but seeing as you are using the scrollrect, it doesnt place correctly. I suppose it depends what you are after, but I would reckon it to be more often the case that you want the item actually cropped, ie., using bitmapdata. What do you reckon?

  • http://www.rigardkruger.com Rigard Kruger

    One thing about your resize and crop function, tho, is that it’s tricky when you are trying to read the resultant dimension values. Using a scrollrect on a displayobject does not literally crop the item, meaning that when you access its width and height, you still get returned its original width and height (after the resizing bit obviously). This could generally turn into a bit of an issue, seeing that you might want to center the resized-cropped item by doing something along the lines of:

    item.x = -item.width / 2;
    item.y = -item.height / 2;

    This code would be fine if it was actually cropped, but seeing as you are using the scrollrect, it doesnt place correctly. I suppose it depends what you are after, but I would reckon it to be more often the case that you want the item actually cropped, ie., using bitmapdata. What do you reckon?

  • http://shaun.boyblack.co.za/blog/ shaun

    Ah yes, complications!

    That scrollRect is a nuisance really.. If you trace out the width one frame later, you will notice that it has indeed been cropped, and the resulting width and height will match those of the scrollRect.

    I opted for scrollRect because it seemed the simplest solution at the time – I’d forgotten about that one frame lag though..

    Perhaps the bitmapdata route would be best then..

  • http://www.boyblack.co.za shaun

    Ah yes, complications!

    That scrollRect is a nuisance really.. If you trace out the width one frame later, you will notice that it has indeed been cropped, and the resulting width and height will match those of the scrollRect.

    I opted for scrollRect because it seemed the simplest solution at the time – I’d forgotten about that one frame lag though..

    Perhaps the bitmapdata route would be best then..

  • http://www.rigardkruger.com/ Rigard Kruger

    Flash: So great, yet sometimes… … so silly.

  • http://www.rigardkruger.com Rigard Kruger

    Flash: So great, yet sometimes… … so silly.

  • http://blog.soulwire.co.uk/ Justin

    Very cool! I do seem to have pinched your idea though!

    ScrollRect is a good call, though I had trouble with that too, specifically when fitting the DO into a rectangle with x or y != 0.

    Anyway, as Rigard says its the simple things right!

    Love the look of the RobotLegs by the way! Heading over to have a peak at the demos now… :)

  • http://blog.soulwire.co.uk/ Justin

    Very cool! I do seem to have pinched your idea though!

    ScrollRect is a good call, though I had trouble with that too, specifically when fitting the DO into a rectangle with x or y != 0.

    Anyway, as Rigard says its the simple things right!

    Love the look of the RobotLegs by the way! Heading over to have a peak at the demos now… :)

  • http://shaun.boyblack.co.za/blog/ shaun

    Hi Justin,

    Nah, I like yours way better!

    Would love to know what you think of RobotLegs if you get the chance to play around with it. The demo is pretty lame, but it demonstrates basic usage and features.

    Cheers!

  • http://shaun.boyblack.co.za/ shaun

    Hi Justin,

    Nah, I like yours way better!

    Would love to know what you think of RobotLegs if you get the chance to play around with it. The demo is pretty lame, but it demonstrates basic usage and features.

    Cheers!

  • http://www.boyblack.co.za/ shaun

    Heh, no problemo! Glad to be of assistance.

  • http://www.rutiso.net/ Max Scheer

    That rocks … You are great. Saved my day or better: The night :) Thanks man!

blog comments powered by Disqus