Automatic Image Cropping JavaScript Tool Suggestions

Question

I wanted to see if anyone knew of a browser (or possibly even Java) tool where I can upload an image and it will make an effort to find different characters and crop them out to individual images.

For example, in this image, I'd like for the tool to find three unique runic symbols and save them out to individual files. It's not really OCR because we aren't interpreting what the characters are, we just need to recognize that there's a bit of white space between them, so let's take that and save them.

My company has the "you're a programmer, so you should be able to do this, right?" attitude, and I need to provide solutions or alternatives to the requirement. I know that there are many tools where the user can manually crop, but they are specifically looking for an automagic tool to reduce the amount of user activity.

If a (preferably Java) server side tool is available, I'd definitely be open to that as well.

Any jQuery, Vue, or even Java, etc. advice would be greatly appreciated.

Update: Imagemagick worked based on the response from @fmw42 below, but we found another tool called the Marvin Image Processing Framework that is doing what we need and it's native Java.

http://marvinproject.sourceforge.net/en/index.html

Answer 1

In ImageMagick, there is a connected-components tool that would do what you want with a little unix scripting. It only works if there is white separation between the characters. I believe that OpenCV also has something similar.

Input:

Lets start with just the connected-components to show the textual data returned:

convert rUNOP.png -alpha off -threshold 50% -type bilevel \
-define connected-components:verbose=true \
-connected-components 4 null: | sed 's/^[ ]*//'

Objects (id: bounding-box centroid area mean-color):
0: 236x139+0+0 118.2,71.3 30849 gray(255)
2: 36x50+27+11 39.7,30.5 630 gray(0)
3: 29x50+90+11 103.3,34.3 580 gray(0)
1: 23x50+155+9 163.3,33.3 502 gray(0)
4: 13x24+160+21 165.0,32.9 243 gray(255)

Now combine that with some scripting to find those entries with black i.e., gray(0) color and extract the bounding box and use that to crop the input image.

OLDIFS=$IFS
IFS=$'\n'
arr=(`convert rUNOP.png -alpha off -threshold 50% -type bilevel \
-define connected-components:verbose=true \
-connected-components 4 null: | sed 's/^[ ]*//'`)
num=${#arr[*]}
IFS=$OLDIFS
for ((i=0; i<num; i++)); do
bbox=`echo ${arr[$i]} | cut -d\  -f2`
color=`echo ${arr[$i]} | cut -d\  -f5`
if [ "$color" = "gray(0)" ]; then
convert rUNOP.png -crop $bbox +repage rUNOP_crop_$i.gif
fi
done