8

I have the following html code rendered on my client's browser:

<div id="Div">
  <img src="myImage.jpg" id="myImage"/>
</div>

This particular image is uploaded by the user and then displayed here. I need to allow my user to remove any red-eye from this image. I would like to do it without any postback ( I'm using CodeIgniter at the back ). Are there any available libraries for this in JQuery (or plain Javascript) ? If not what could be a good approach ?

Baba
  • 94,024
  • 28
  • 166
  • 217
unni
  • 2,891
  • 4
  • 19
  • 22
  • 5
    That's a very non-trivial thing you are trying to do. – ThiefMaster Apr 05 '12 at 08:29
  • :D . So should I let PHP do the processing and just display the result ? – unni Apr 05 '12 at 08:36
  • 1
    What's next...? Use javascript to launch nuclear missile? On a serious note, yes you should probably get your server to do image processing for you if it's as complex as removing red eye. – Andreas Wong Apr 05 '12 at 08:42
  • Thanks guys, just wanted to know if it was possible at all. Now I can go for the server side approach in peace :) – unni Apr 05 '12 at 08:46

1 Answers1

3

There is a lot of things that go on in red eye removal

A. Eye Detection

B. Red Eye Region Mapping

C. Fill Color

D. Fuzz

E. Opaque

My advice

If not a JOB for Jquery and even PHP would not remove red eye effectively

Likely Solution

  1. Get a Jquery area selection script where users can select their red eyes them self ( With this you would be able to get the region (X1 , Y1 , X2 , Y2 , Height , Width ) example http://odyniec.net/projects/imgareaselect/

  2. Have a simple Color Picker where they can select replacement color ??? Default can be black

  3. Send request to imagemagick using exec in PHP for the red eye removal

  4. You can not output your image ...

EDIT 1

I was able to help you get a ready command line tool for this JOB

http://www.fmwconcepts.com/imagemagick/index.php http://www.fmwconcepts.com/imagemagick/redeye/index.php

Basic Concept

A. Create a desaturate copy of the input image

B. Perform a fuzzy floodfill to create a mask image

C. Composite the original with the desaturated image using the mask image

D. Apply a morphologic close operation to fill in the specular hole in the mask and then create a difference operation to create a new mask of just the hole

E. Apply the new mask to composite the previous result with a full lightness, zero saturation version of the original image

Sample Process 

convert -quiet -regard-warnings "$infile" +repage "$tmpA1"
convert $tmpA1 -modulate $light,$sat,100 $tmpA2
proc=""
for ((i=0; i<np; i++)); do
proc="$proc matte ${pairArray[i]} floodfill"
done
convert $tmpA5 -fuzz $fuzz% -fill none -draw "$proc" \
-fill "rgba(255,255,255,1)" +opaque "rgba(0,0,0,0)" \
-fill "rgba(0,0,0,1)" -opaque "rgba(0,0,0,0)" \
-alpha off -negate $tmpA3
if [ "$dilate" = 0 ]; then
dilation=""
else
dilation="-morphology dilate disk:$dilate"
fi
convert $tmpA1 $tmpA2 $tmpA3 -compose over -composite $tmpA2
convert $tmpA3 \( +clone -morphology close disk:$rad $dilation \) \
-compose difference -composite -auto-level \
-negate -threshold 0 -negate $tmpA4
convert $tmpA2 \( $tmpA1 -modulate 100,0,100 \) $tmpA4 \
-compose over -composite $outfile

I hope this helps

Thanks

:)

Baba
  • 94,024
  • 28
  • 166
  • 217