Demo
Download
Documentation

Kutout is an as3 (Actionscript 3) open-source library and sample application for image extraction and object extraction from images in Flash. The methodology behind the approach was taken from the java implementation of a pre-existing open-source solution called SIOX (Simple Interactive Object Extraction). The solution and all source-code is being released under the Apache Licence, version 2.0.

“When Thomas Edison worked late into the night on the electric light, he had to do it by gas lamp or candle. I’m sure it made the work seem that much more urgent.” George Carlin

The algorithm has four necessary steps.

1. Define a region to extract in the image. The algorithm takes the pixels outside of the region and applies a confidence to the pixels as a certain background. It applies an unknown confidence to the pixels inside the selection region.
2. Paint the foreground. The algorithm then needs reference to what is considered the object. When you paint the foreground area, it gives these pixels a confidence of a foreground. You can paint as much or as little as you like, as long as the algorithm has some sort of foreground reference.
3. Paint the background. The algorithm also requires a reference to the background. Technically Step 1 applies some background reference so the algorithm should run without this step, but regardless, it helps to paint around the image.
4. Run the algorithm and repair. We’ve included some methods in the implementation to help repair the segmentation. Some objects are nearly impossible to segment based on only foreground and background color reference due to the complex nature of colors and their surroundings, so repair tools are always necessary. The repair tools also use the results from the algorithm to help you repair. They compare the confidence of the pixels compared to the confidence of the foreground to determine if the pixels could be actually part of the image. You can control the sensitivity of this tool and adjust how accurate and close the confidence must be. Sometimes the smart pixel refinement methods do not seem to repair perfectly, so in our sample app, setting the sensitivity to zero will apply a hard brush for painting and erasing.

Now that we’ve summarized the functionality briefly, we’ll give you some visual examples of how we approached the functionality in our sample application, Kutout.

Step 1.

Choose an image from the thumbnail browser, or upload one of your own by clicking the "Add an image" button.

Step 2.

Select an area to crop around the object you want to extract.

Step 3.

Roughly paint the foreground area of the object you want to extract. For best results, be conservative and try to stay in the lines. Highlighting the background as a foreground is a no-no.

Step 4.

Roughly paint the area that you consider the background around the object you are trying to extract. Try to stay in the lines and don't paint any of the foreground as a background!

Step 5a.

Now you should have a Kutout image! Just use the three brushes on the left to fix up any mistakes the algorithm made.

Step 5b.

Success! Now click Save to save your image as a png.

Example

Kutout is a very complex app which makes use of many interface tools that help to make the algorithm work. For examples of how to implement painting tools and cropping tools, please see the application source code and documentation. For a brief overview on how the application works, below is an abstract overview of the core methods to produce the functionality. All values are arbitrary and just used for code examples purposes.

//first we create the canvas
var bitmap:Bitmap; //this should already be a populated image object
var canvas:Canvas = new Canvas();
canvas.initFromBitmapData(bitmap.bitmapData);
addChild(canvas);
 
//next we create the controller
var segmentationController:SegmentationController = new SegmentationController(canvas);
 
//now we can perform a crop
var area:Rectangle = new Rectangle(50,50,300,300);
segmentationController.applySelection(area, SegmentationConfidence.UNKNOWN_REGION_CONFIDENCE);
 
//now we'll paint a little foreground
var centerPoint:Point = new Point(150,150);
var radius:Number = 100;
segmentationController.setCircleConfidence(centerPoint, radius, SegmentationConfidence.FOREGROUND_CONFIDENCE);
 
//now we'll paint a little background
centerPoint = new Point(270,270);
radius = 30;
segmentationController.setCircleConfidence(centerPoint, radius, SegmentationConfidence.BACKGROUND_CONFIDENCE);
 
//now we perform the segmentation
segmentationController.addEventListener(SegmentationEvent.SEGMENTATION_COMPLETE, handleSegmentationComplete);
segmentationController.segmentate();
 
function handleSegmentationComplete(e:SegmentationEvent):void
{
     //now we can do a little refinement...whether it be addition or subtraction refinement
     var refinePoint:Point = new Point(20,20);
     var refineRadius:Number = 5;
     var refineSensitivity:Number = 0.3;
     segmentationController.supPixelRefineAddCircle(refinePoint, refineRadius, refineSensitivity);
}

Demo

Try it for yourself! View our demo here!

Download

Here is a zip that contains the documentation, all source code, and a SWC for the library.

Documentation

Application Only

Library Only

Application and Library