Edge detection combined with floodfill algorithm image processing

Question

Ok, I'm looking to write an area fill tool for image manipulation that I want to combine edge detection and for example a flood fill algorithm. I have looked at different types of algorithms (canny, laplace sobel etc.) but don't understand how to implement them and adapt them to suit my circumstances.

I have been able to use the html5rocks example from :-

http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

and can apply it to my image data. I can also apply a new colour into my selected image but I am not sure how I can combine the 2 so that I can do the following -

mousclick on area within image and replace old colour with new colour, within area an defined by edges defined by edge detection filter around mouseclick and the original colour (I intend to try using the original colours HSL values within a given tolerance)

So effectively like a intelligent area fill.

It is using the HTML5 canvas and javascript.

Hope this makes sense...

Answer 1

in order to use Image processing algorithms I would suggest you start with matlab. if you really want to understand how this is done.
this is a free Image Processing course https://class.coursera.org/images-2012-001/auth/welcome?type=logout&visiting=https%3A%2F%2Fclass.coursera.org%2Fimages-2012-001%2Fclass%2Findex

function [ output_args ] = SobelEdgeDetection( Image )

maskX = [-1 0 1 ; -2 0 2; -1 0 1];
maskY = [-1 -2 -1 ; 0 0 0 ; 1 2 1] ;

resX = conv2(Image, maskX);
resY = conv2(Image, maskY);

magnitude = sqrt(resX.^2 + resY.^2);
direction = atan(resY/resX);
thresh = magnitude < 101;
magnitude(thresh) = 0;
showImage(magnitude);

end

this is an example of sobel edge detection function i wrote. you need to learn what is a convolution, and where do you use it.

If you just want to use it. I would suggest you explore http://www.pixastic.com/lib/docs/actions/edges/ and other image processing. for every image you will need to learn how to set the correct values.