Creating a path from the edge of an image

Question

I have a binary image (e.g., .png) with background transparency. Let\'s say it looks like a blob with an irregular, but solid shape (no holes and it\'s all in one piece).

Answer 1

You can use the "marching ants" algorithm to determine the outline path of a closed subsection of an image.

The marching ants algorithm creates a set of points representing an outline path. Then you can use those points to draw a closed path around the subsection of your image.

The most important part of the algorithm is telling it what is/isn't part of your desired subsection. Since you're wanting to include only non-transparent pixels on your image, you could define how to select pixels like this:

// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image
// The data[] array is the pixel array fetched by context.getImageData

var defineNonTransparent=function(x,y){
    var a=data[(y*cw+x)*4+3];
    return(a>20);
}

Here's annotated example code using the marching ants algorithm from D3: http://jsfiddle.net/m1erickson/UyG6L/

This example uses .png as the source image. If you have a blob you will have to convert your blob to .png format.

 







    Show Image

    Show Outline Path