How to map an image using Google Areas and Coordinates.Cloud.Vision.Api

Asked

Viewed 601 times

0

Hello, friends!

I’m trying to map an image, using the Html5 "Area" tag that works with polygons, I want to map a rectangle or several rectangles on top of an image "img".

My doubt is, I have a map that bounces or tables coordinates this way: 

[X:166 - Y:64] [X:245 - Y:64] [X:245 - Y:81] [X:166 - Y:81]

These are coordinates of an area of an image. what I want is to take these coordinates and map them using the HTML5 Area tag but this tag only accepts 4 types of coordinates, how to proceed ? 

<map name = “shape”> <area shape = “rect” alt=”parte 1” coords = “0, 0, 100, 100” href=”parte1.html”/> <area shape = “circle” alt=”parte 2” coords = “100, 100, 25” href=”parte2.html”/> <area shape = “poly” alt=”parte 3” coords = “116, 207, 186, 299, 49, 296” href=”parte3.html”/></map><img src=”imagem.jpg” usemap=”#shape” />

From what I saw "Area" only accepts 4 coordinates and now.

html html5 image canvas xhtml

  • Can you explain better what kind of way these coordinates need to create? Because their order is a little confusing to me, since all the points are repeated twice each in different order.

  • So the Google API.Cloud.Vision returns this information to me [X:166 - Y:64] [X:245 - Y:64] [X:245 - Y:81] [X:166 - Y:81] that is, this information and the Vertical Horizontal of each Coordinate realize that are 4 coordinates each with horizontal and Vertial forming a rectangle or square (Poligono). okay. My doubt is how I use the HTML5 Area tag being this for her Shape attribute accepts domente 4 coordinates I did not understand right to that demarcation part that the Area tag uses understands!?

1 answer

0

Has q see if these coordinates are for two areas of the rect type to form two squares, or if they are for a single area in a polygon.

If it is a polygon by the coordinates that is there, there will appear two squares, there will appear another Shape with points mixed.

In a rect vc style area you can only 4 coordinates, being X1, Y1 which is the starting point and x2, Y2 which is the final point.

If it is in this diagram its coordinates should have two straight areas more or less like this?

<area shape = “rect” alt=”parte 1” coords = “x1, y1, x2, y2” href=”parte1.html”/>
<area shape = “rect” alt=”parte 1” coords = “x3, y3, x4, y4” href=”parte1.html”/>

In a polygon you can place as many coordinates in pairs as desired, and each will be equivalent to a point in the style X1, Y1, x2, Y2, X3, Y3, X4, y4 and etc....

And then following your code would be something like this:

<area shape = “poly” alt=”parte 3” coords = “x1, y1, x2, y2, x3, y3, x4, y4” href=”parte3.html”/>

And that way you could put all four of your coordinates in one area.

Now just stay tuned by the order, because the image comes first and the map comes later.

In your code you’re putting the image tag after the map tag, and it’s the other way around.

Anything in this link you can find more information:

https://www.html-5-tutorial.com/map-and-area-elements.htm

Browser other questions tagged html html5 image canvas xhtml

You are not signed in. Login or sign up in order to post.