Using jquery plug-in imgareaselect to get the image information of the selection domain _jquery

Let's analyze It first:

(The following values, how to obtain, later in the specific implementation of the analysis, now only talk about the macro)

How do I get image information for a select domain? In fact, how do we get the selection, where it is in the image, and what is the size of the area?

By telling the computer about its location and size, it knew that we were going to get that piece of image information.

(Our selection is in a plane, and is a regular graphic, square, or rectangular (popular: rectangular))

Size:

The width of the area, the height value, the two values multiplied, is the area of the area, that is, size. (This should not be difficult)

Position:

1. Suppose we only tell the computer that the selection area is a [coordinate value of the starting point], and also tells the computer that the area's [area] conforms to these two conditions four:

"Red" is the starting point coordinate of the selected region;

A, B, C, D, for Red as the starting point, draw the selection area (each area is the same area, starting point coordinates are the same, but can come out four kinds of circumstances);

1. Suppose we tell the computer that this selection area has two coordinates, and also tells the computer area area:

"Red" is the starting point coordinate of the selection,

"Blue" is the horizontal end point coordinate value for the selected area

"Green" is the area of the selected area;

To meet these three conditions at the same time, there may only be one situation

So, we have to get this image area information, we need to get

Above three values: two point coordinate value, and an area value

$ (' #x1 '). Val (selection.x1);
$ (' #y1 '). Val (selection.y1);
$ (' #x2 '). Val (selection.x2);
$ (' #y2 '). Val (selection.y2);
$ (' #w '). Val (selection.width);
$ (' #h '). Val (selection.height);

The above is the entire content of this article, I hope to help you, interested friends can see the "use of jquery plug-in imgareaselect to achieve picture upload cropping (synchronized display image location information)" and " Using jquery plug-in imgareaselect to achieve image upload cropping (zoom out), thank you for the support of the cloud-Habitat community!