Kutout – An application for cutting out images

Posted on March 30th, 2010 by Norm McGarry

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.

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.
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.
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.
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

Actionscript, Actionscript 3, as3, Flash, Image Extraction, Object Extraction, Siox

11 Responses to “Kutout – An application for cutting out images”

Paul says:

October 29, 2012 at 6:32 am

Sorry ! Me again.

The app works great if I run it in Flash but as soon as I try to publish it in AIR I get the following error;

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.norm.loader::NBulkLoaderBitmap/get bitmapData()[src\com\norm\loader\NBulkLoaderBitmap.as:188]

Does anyone have any ideas ?

Reply
enda says:

September 18, 2012 at 9:24 pm

wow..this is exactly what i’m looking for. thanks.

Reply
Paul says:

August 15, 2012 at 10:57 am

Hi and thanks for a GREAT post.

Why is it that once I unzip the file and run the Kutout.fla once it works fine. But if I try to run it a second time I get the following errors;

Kutout\src\app\kutout\tools\ForegroundTool.as, Line 38 1120: Access of undefined property SegmentationConfidence.

and

Kutout\src\app\kutout\tools\ForegroundTool.as, Line 4 1172: Definition com.hook.imageprocessing.siox.objects:SegmentationConfidence could not be found.

Thanks

Paul

Reply
- Paul says:
  
  August 15, 2012 at 1:50 pm
  
  Hi
  
  Theres definately a problem with the code in the zip file. Your demo works fine but when I run the zip file for the first time I cant get beyond step 3. Then when I try to run it a second time I get the errors I quoted earlier.
  
  Thanks
  
  Paul
  
  Reply
  - Paul says:
    
    August 18, 2012 at 3:15 am
    
    Comparing the downloaded app with the demo it seems that when I run the download then after I have selected an image to edit the menu on the left should highlight “NEXT” but this is not happenning. Perhaps this is the start of the problem or am I missing something here ?
    
    Paul
    
    Reply
    - Paul says:
      
      August 18, 2012 at 5:11 am
      
      OK – solved the problem. Theres NOTHING wrong with the code. I simply needed to reference the KutOut.swc file in the app Library path. Sorry but I am new to AS3 and not used to working with swc files.
      
      Thanks again.
      
      Paul
      
      Reply
Anonymous says:

August 15, 2012 at 10:50 am

Hi

Thanks for this post. BRILLIANT !

Just one strange issue. If I unzip the zip file and run the kutrout.fla in Flash CS6 it runs perfectly the first time. However if I close the app from the opening screen by clicking the X top right and then try to re-run the app it doesnt work and gives the following errors;

Kutout\src\app\kutout\tools\ForegroundTool.as, Line 38 1120: Access of undefined property SegmentationConfidence.

and

Kutout\src\app\kutout\tools\ForegroundTool.as, Line 4 1172: Definition com.hook.imageprocessing.siox.objects:SegmentationConfidence could not be found.

Any idea whats wrong ?

Does something need to be re-set perhaps ?

Thanks

Paul

Reply
neo says:

August 11, 2012 at 11:08 pm

great ! but the performance is a bit of slow. is there anyway to improve performance?

Reply
iPhone App Development says:

February 25, 2011 at 1:39 am

Interesting post. Thanks for sharing.

Reply
kanchana says:

April 30, 2010 at 12:55 am

ela ela

Reply
Logs: They’re better than bad, they’re good! | Hook - Flash Labs says:

April 8, 2010 at 5:51 am

[...] the most exciting topic out there especially compared to some of the other hotness on this site: Kutout – An application for cutting out images and Fuzzy Physics – 3.1: Rigid Body Dynamics, pt [...]

Reply

Click here to cancel reply.

Labs.byHook

Scripts, Tools & Methods Developed at Hook

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.