ImageCropper is a free component (licensed under the MIT License) for Adobe Flex that allows an image to be cropped by adjusting the position and dimensions of a cropping rectangle that overlays the image.
The image used as the source for the ImageCropper may be provided as a BitmapData object or as a URL that points to an external image.
The component can return the cropped image as a BitmapData object, or it can return a Rectangle that defines the cropped area. Retrieving a Rectangle from the component is useful if the image will be cropped on a server (perhaps by a Content Management System).
In addition to allowing unconstrained cropping, the component may be configured to constrain the cropping rectangle to an aspect ratio. For example, defining a cropping rectangle with a width of 200 pixels and a height of 100 pixels and then enabling the aspect ratio constraint will result in the cropping rectangle maintaining a 2:1 aspect ratio as it is resized.
The size of the cropping rectangle handles may be modified, as may the color and transparency values used for the handles, the cropping rectangle outline, the mask and the background.
Resources:
- View demo application (with View Source enabled)
- View documentation (ASDoc format)
- Download source code, documentation and demo application
ImageCropper is copyright © 2008 by Paul Whitelock.
It appears that if you are assigning CDATA-tagged XML as the sourceImage, or perhaps in other cases as well (sorry, too busy/lazy to really narrow down the issue) you may need to first cast/type convert to String, so instead of
imageCropper.sourceImage = event.currentTarget.selectedItem.XML_CDATA_URLString;
you will need to say:
imageCropper.sourceImage = String(event.currentTarget.selectedItem.XML_CDATA_URLString);
I pulled my hair out for a while wondering why it wasn’t accepting it…
Great component, thanks very much.
In order to allow a String or a BitmapData object to be passed when using the sourceImage property setter, the method parameter type is declared as a generic Object and the code checks to see if “(value is String || value is BitmapData)”. So, whatever is passed it must be one of those two data types.
It probably would have been a good idea to at least have some code to throw an exception if the parameter value is not recognized as an accepted data type. Since the source code is included you could always make that small change, though now that you know you’ll probably never have that problem again :-)
[...] Image Copper is licensed under the MIT License and is available as a free download Here [...]
Hi, very nice component.
Is it possible to modify this component to get scrollbars and zoom functionality where the selection box also scales with the image?
Those are both great ideas, but unfortunately I’m slammed with work at the moment so I can’t take a look at implementing them for a while. If you’re feeling ambitious, the source code is included so you could try to add those features yourself. If you do, let me know :-) Thanks for the suggestions!
hey, just wondering what you used to put the nice documentation together?
The documentation was created with ASDoc, which is part of Flex Builder (I think it’s also included with the SDK, though I’m not sure).
Please help. I download these source for the imageCropper but I get a compiler error.
could not be resolved. I don’t really know where the c comes into play. I tried changing it to mx but nothing. I also tried changing it to code: but no luck.
I really dig this component I could really use it in a project I’m working on.
Nevermind I got it. Your source code uses “” instead of “”
I’m using your great component but now I’m looking for a way to make it work on an image selected from my computer. The only way I know is FileReference but I couldn’t figure out a way to load the data from it. Do you by any means know how to do that?
You’ll have to create an AIR application if you want to access files on the user’s disk directly. As an alternative, you could upload the file to the server and then have Flex load the file from the server. You’d then be able to get to the data. The upload/download method can eat up quite a bit of bandwidth depending on the size of the image.
Sebastien – You should check out the as3xls code on google (code.google.com/p/as3xls) – it has the source for uploading a file to a server and rather than saving the file on the server (taking up space), return the file as a base 64 encoded string. It’s used for Excel files, but can be used for any file type (images, documents, etc.) Then you won’t be limited to an AIR app to crop a local image! :D
And Paul – love the component – you should also look into doing something like the above… let users use their own image files to crop! :D
Hey Paul – I made a (really) minor adjustment to your ImageCropper component to accept a ByteArray and display the image. If you’re interested – I can help you with an update to the component! Again – really great component!
Hey Paul,
Just got done looking over your image cropper and I just wanted to say Thanks! It is so cool to see someone open source their code and take the time to document the source so well! It makes it very easy to use! Good work!
Bill
Hi Paul,
Truly amazing. Thanks so much for your contribution.
Andrew.
[...] Nice Extension. Thinking ’bout integrating it in our project for generating brochures in a Air-Application. [Link Flex Image Cropping Component « Random Madness] [...]
Hi Paul,
nice work! I use your cropper tool for my flex admin and it really works great. Fist, thanks for sharing it, I saved a lot of time this way.
But during my work I found a little bug. When the component just loaded and you havened touched any of the handles jet. If your first click goes into the black background area and you do a mouse down move the crop box is gone and there is no way to get it back without reloading the component.
I tried to fix this bug by doing the following:
I added this line:
var mouseLoc:int = mouseLocation(event);
to the doMouseMove() Function.
And instet of:
if (activeHandle == 0) {
it should be:
if (activeHandle == 0 && mouseLoc >= 0) {
Hope this helps.
Greetings and go on like this.
Thanks for catching that and for the fix! I’ll update the source once I get a free minute :-)
Thanks !!
Hi,
Thanks for the great component.I’d like to use it as a UI interface for my video cropping application. Can I use that component over videoDisplay object to get the user’s desired crop size, width, height, x, y etc? I will use server side mencoder/ffmpeg etc for actual cropping. I just need to find out how to get those coordinates,positions, width, height etc from your component. I understand I have to modify and wondering if there is any pointer for it?
Thanks again.
Kevin
Sounds like a great application for cropping, though off of the top of my head I’m not sure what modifications would need to be made. Currently I’m slammed with work so I don’t have time to investigate, but I’d be interested to hear if you manage to come up with a solution. Thanks for the feedback!
[...] crop tool functionality is aided by the awesome Flex Image Cropping Component from Random [...]
Great component thanks for that Paul.
[...] avoid users making an additional step to crop the image size. We provided a online imagecopper - Flex Image Cropping Component1 .It can maintain cropper ratio and resize and move the crop [...]
Hi Paul! Very nice work! I have a question, i was trying to make a selection tool like the image cropper but with a circle (against a rectangle), i think can make it from a shape or a circle object. I dont need to crop, i just need to take out some effect (like a black and white or a blur effect) from the circle area , but i need to see the area so i need to draw the circle, you think i can use your code and change the Rectangle with a circle shape? maybe you have a better idea. Thanks in advance
You should be able to use the code that manages the selection rectangle and perhaps map a circular mask (or any other shaped mask) to the rectangular area. As the selection rectangle changes, update the width/height/position of your mask. Thanks for the comments, and good luck!