6

I want to identify squares/rectangles inside my UIImageView (or UIImage).

I looked at "Very simple image recognition on iOS", but that's not quite what I'm looking.

At the moment I have an UIImageView which is given a UIImage from time to time.

Most of the UIImagees has black squares/rectangles like this: img. But the corners may (or may not) have rounded edges.

How can I identify the first black square/rectangle's size? The end result would be to resize my UIImageView to make the first black square in the UIImage fill the screen. Like so: img With iPhone

Community
  • 1
  • 1
Aleksander Azizi
  • 9,829
  • 9
  • 59
  • 87
  • Can you just clarify the class of images you'll use in practice? Will you literally always be using black outline boxes with everything else white or will it be, say, boxes with arbitrary content surrounded by a black border on white, or something else again? – Tommy Sep 12 '12 at 21:11
  • 2
    by "square" you really mean "rectangle"? please clarify... – Felix Sep 12 '12 at 21:13
  • making a comic-strip viewer? you WILL likely have to do some pattern recognition but it shouldn't be too bad if you're just looking for separator lines like that. – TomSwift Sep 12 '12 at 21:44
  • The "square" may have rounded edges, and is filled with colors. The size of the square/rectangle may vary as well. – Aleksander Azizi Sep 13 '12 at 21:14
  • 2
    @AleksanderAzizi - In that case, you probably should update the question with a few sample images that illustrate the various cases. My answer will not work for bordered images that have color and other features within the boxes, but I was under the assumption that you wanted to detect shapes just like what you had in your question. The rounded corners will also present a problem, but depending on the corner radius, you could scale the image down first and do corner detection on the smaller image where the radius has been effectively removed. – Brad Larson Sep 16 '12 at 17:03

3 Answers3

10

If your images will always be sharp black squares in a horizontal row, you could use corner detection to identify the rectangles, then pick out the four leftmost corners. I have three variants of corner detectors in my open source GPUImage framework based on the Harris, Noble, and Shi-Tomasi corner detection methods.

Running a GPUImageHarrisCornerDetectionFilter against your boxes with a threshold of 0.4 and sensitivity of 4.0 yields the following result:

Harris corner detection results

They're a little hard to see, but red crosshairs mark where the detector found the corners of your boxes. Again, you just need to take the leftmost four points to find your target rectangle, and then simply scale your image or view so that this rectangle now fills your view.

An example of how to run such feature detection can be found in either the FilterShowcase or FeatureExtractionTest example within my framework. I describe the process by which I do this in this answer over at Signal Processing.

Community
  • 1
  • 1
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
  • Very good solution! +1 from me. Unfortunately question have been modified to also contain rounded corners ... – przemo_li Sep 16 '12 at 12:25
  • Thanks for an awesome framework! However, I can't get this to work. I even tried the FeatureExtractionTest example, and it didn't find any corners. I've posted my own question here (before seeing this) http://stackoverflow.com/questions/18914461/gpuimage-how-to-chain-filters-with-gpuimagepicture – Mikael Sep 20 '13 at 13:51
0

It seems easiest solution would be:

  1. sum up all pixels vertically to the top-most row (like an excel table)
  2. rows with the smallest/biggest value are your "gap" region

width can be derived from (2).

dklt
  • 1,703
  • 1
  • 12
  • 12
-2

From what I understood about your question, you need to implement the Canny Edge Detection Algorithm for detecting the edges of the black borders in your image.

For this you should use the image processing framework available at the following links

Use the ImageWrapper *Image::cannyEdgeExtract(float tlow, float thigh)function from the Image.m file.

Vimal Venugopalan
  • 4,091
  • 3
  • 16
  • 25
  • Canny edge detection won't help you here, because you'll still need to determine the bounding boxes those edges define. Also, it will pick up two edges: one for the outside of the box, and one for the inside. A ridge filter would probably be more appropriate, but you'll still need to determine the boxes from that. – Brad Larson Sep 18 '12 at 19:45