Mapping an image using Google's Areas and Coordinates.Cloud.Vision.Api

Question

Mapping an image using Google's Areas and Coordinates.Cloud.Vision.Api

Navigation

#1 by (0 votes)

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 over an "img" image.

My question is, do I have a mapping that I can not find or coordinate in this way:

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

They are coordinates of an area of an image. what I want and get 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 imagem xhtml canvas

asked by anonymous 01.10.2017 / 19:51

1 answer

How to read a txt file and encrypt its contents Infinite Loop Method

score 0 · Answer 1

You have to see if these coordinates are for two rect-rect areas to form two squares, or if they are for a single area in a polygon.

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

In a rect-style area you can have only 4 coordinates, x1, y1 which is the starting point and x2, y2 which is the end point.

If in this scheme your coordinates should have two rect 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 by how many coordinates in pairs you want, and each one 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 look 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 4 coordinates in the same area.

Now just be aware of the order, because the image comes first and the map later.

In your code you are putting the tag of the image after the map tag, and it is the opposite.

Anything on this link you can find more information:

link