Email Updates RSS Subscribe
Line

This blog is created and maintained by the technical team at Hook in an effort to preserve and share the insights and experience gained during the research and testing phases of our development process. Often, much of this information is lost or hidden once a project is completed. These articles aim to revisit, expand and/or review the concepts that seem worth exploring further. The site also serves as a platform for releasing tools developed internally to help streamline ad development.

Launch
Line

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

Line

Kutout – An application for cutting out images

Line
Posted on March 30th, 2010 by Norm McGarry
Line

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.

Kutout Image Extraction in Flash - Step 1

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

Step 2.

Kutout Image Extraction in Flash - 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.

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!

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.

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.

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

Line
11 Responses to “Kutout – An application for cutting out images”
  1. Paul says:

    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 ?

  2. enda says:

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

  3. Paul says:

    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

    • Paul says:

      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

      • Paul says:

        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

        • Paul says:

          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

  4. Anonymous says:

    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

  5. neo says:

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

  6. Interesting post. Thanks for sharing.

  7. kanchana says:

    ela ela

  8. [...] 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 [...]


Leave a Reply

*

Line
Line
Pony