Using pure javascript provide x,y,z coordinates of lines and boxes on canvas

I want to detect form fields on HTML5 canvas.

You will write a sample doing the following:

The task is to:

1. Load the supplied image into HTML5 canvas

2. Find all the text boxs represented in the canvas

3. Find all the text lines represented in the canvas

4. Find all checkboxes represented in the canvas

5. Produce an array containing the coordinates (x,y,z) and type

I have provided the test vector you will use.

It seems this can be done using a Hugh Transform, I am not sure this is the best approach or not, I leave that to you. I found an example here: [login to view URL]

And a library implementing it here: [login to view URL]

My naive approach would be:

1. Detect the lines using the hough transform,

2. if there is is x that goes left to right but has no intersecting line we have a text line,

3. if there is is x that goes left to right and there is an intersecting "z", then we have a candidate for a box,

a. if the "z" has a second "x" intersecting it that is parallel and equal length to the first "x", we have a text box

b. If the first x and the second x are equal in length (with some margin of error) we have a checkbox.

This may be a horrible approach it is up to you do figure out how to do this.

Not looking for production quality code just a clean sample with minimal dependencies.

#image recognition #computer vision

JavaScript

Project ID: #11383153

About the project