Using jquery plug-in imgareaselect to achieve image upload cropping (zoom out) _jquery

The key to this application:

　1. Keep the left selection area and the image information displayed on the right side to one.

　2. Depending on the size of the selected area on the left, the right side has an effect to enlarge or shrink locally.

3. Background upload function.

So this time, just talk [enlarge] or [shrink]. [Position] and [upload] question, next time, I write again (because that plug-in code too much, I also did not read, is studying the research).

["area": Is wide * high, that is, area;]

["Zoom In or out": is a proportional value, usually we say to enlarge or shrink, say how much to enlarge or shrink, or to enlarge or reduce the number of multiples]

One, how can enlarge or reduce the part of the picture?

Local amplification: The essence is to enlarge the picture, that is, the width and height of the picture to change the large, and then enlarge the picture, in a fixed size (of course, smaller than the original box) in the box, displayed.

Local amplification: The essence is to reduce the entire picture, that is, the width and height of the picture to change the small, and then shrink the picture, in a fixed size (of course, smaller than the original box) in the box, displayed.

Second, left and right layout:

Each has a same picture, the left selected area changes, will let the right side of the picture, change the size, according to the 1th, so there is a local amplification reduction effect;

Enlarge and shrink the formula:

On the left is the original image, the right side is reduced or enlarged after the figure. The rule is the larger the left side of the selection, then the right side will also reduce the figure, whereas the left side of the selected area smaller, then the right side of the picture will be magnified.

This rule tells us that there should be division in the algorithm. Because in division, the numerator is unchanged, the denominator becomes larger, then the smaller the result, the larger the opposite. So in the division of the molecule, unchanged in the case, the denominator and the result is exactly a pair, inversely proportional relationship, a large, one is small, on the contrary, a small, the other is large. Also coincides with the picture of our application zoom in and out, the relationship to one.

Iv. Purpose

1. The result we want is the picture size on the right and the display position (show position, next time, is under study);

Five, the specific algorithm:

Left and right image width: same 300PX;

Left and right figure height: same 300PX;

Left figure display Area: Width 300PX, high 300PX

Right Figure display Area: Width 100PX, high 100PX

The width of the selected area is set to: Selection.width (specifically how to get this value, I am also in the analysis.) Set first as a last known number)

The height of the selected area is set to: Selection. Height (specifically how to get this value, I am also being analyzed.) Set first as a last known number)

The wide proportional value is set to: ScaleX (specifically how to get this value, I am also in the analysis.) Set first as a last known number)

The high proportional value is set to: ScaleX (specifically how to get this value, I am also in the analysis.) Set first as a last known number)

Here are a total of four things to be clear to determine the following formula.

A, Zoutu, right figure size (width is the same)

B, the left display area is wide (300px*300px)

C., to the right display area width high (100px*100px)

D., select the width and height of the area: (This is obtained by JQ Selection.width,selection.) Height)

5.1 Get Proportional value:

Denominator: According to the 3rd, the width of the selected area: Selection.width and height of the selected area: Selection. Height must be the denominator, because according to the example, the larger their value, the smaller the graph on the right.

Molecular: 100px. The width value of the display area on the right.

Why is it the value? Our goal is to change the width or height of the picture on the right, why is it associated with the width of the display area?

The three departments must be clear. [Select area size, show area size on the right, picture size on right];

The larger the selection, the greater the size of the display area on the right, the image on the right will only shrink if you want to display it in this area.

(A container A can only install 100*100 things, now you want to put b200*200 things, then the container is unchanged, only to make things smaller)

Conversely, the smaller the selection area, less than the size of the right display area, then the right side of the picture to fill in this area, only large pictures.

(A container A can only install 100*100 things, now you want to put b50*50 things, then the container is unchanged, can only make things larger, to fill the entire container)

Select the area small, equal to the right display area size, do not enlarge or shrink, just good;

(A container A can only install 100*100 things, now you want to put b100*100 things, then the container is unchanged, things will not change, just fill the entire container)

Concluded

The wide proportional value is set to: ScaleX = 100/selection.width;

The high proportional value is set to: ScaleX = 100/selection.height;

5.2 Calculate the size of the right picture:

Use this proportional value to multiply the width of the right picture, where 300 is the width and height of the right picture, and the left and right side are the same picture. The width is the same.

Width:Math.round of the right picture (ScaleX * 300),

Height:Math.round of the right picture (ScaleY * 300),

Vi. questions:

Selection.width;

Selection.height

How do these two values get?

I want to first make the big things clear, and then write a few more about how to get the key values in this analysis.

Must be this plug-in is very large, code a lot of complexity, so can only step by step in depth.

This is the plugin URL: http://odyniec.net/projects/imgareaselect/

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