Jquery-Image Upload and cropping plug-in-imgareaselect (Analysis 1) zoom in and out

Key to this application:

1. Keep the information of the selected area on the left and the image displayed on the right one to one.

2. Select the area on the left to enlarge or reduce the area on the right.

3. Background upload function.

This time, we will only talk about [zoom] or [zoom]. [Location] and [upload] problems. Next time, I will write it again (because of the plug-inCodeToo many. I haven't read it yet. I'm studying it ).

["Region": width * height, that is, area.]

["Zoom in or out": it is a proportional value. Generally, to zoom in or out, we usually say how much to zoom in or out, or how many times to zoom in or out.]

 

1. How can I zoom in or out the image part?

Local enlargement: the essence is to enlarge the entire image, that is, to increase the width and height of the image, and then to enlarge the image in a fixed size (of course, a box smaller than the original image).

Partial enlargement: the essence is to reduce the entire image, that is, to reduce the width and height of the image, and then to reduce the image in a fixed size (of course, a box smaller than the original image).

 

2. Left and Right layout:

Each of the left and right images has the same image. The changes in the selected area on the left will change the size of the image on the right. According to the first point, the effect of local zoom-in and zoom-out is achieved;

 

Iii. Zoom-in and zoom-out formula:

The source image is on the left, and the scaled down or enlarged image is on the right. The rule is that the larger the selected area on the left, the smaller the area on the right, and the smaller the area on the left.

This rule tells us that,AlgorithmThere should be division. Because in Division, the numerator remains unchanged and the denominator increases, the smaller the result is, the larger the result is. Therefore, when the numerator in Division remains unchanged, the denominator is exactly the same as the result. There is an inverse relationship between the denominator and the result. If one is large, one is small. If the other is small, the other is big. It is also in close relationship with the image in our application.

 

Iv. Purpose

1. the result we want is the size and position of the picture on the right (display position. Next time, we will discuss it );

 

V. Specific algorithms:

The width of the left and right image is PX;

The height of the left and right charts is the same as PX;

Area shown on the left: 300px in width and 300px in height

Area displayed on the right: 100px in width and 100px in height

The width of the selected area is set to selection. Width (I am also analyzing how to obtain this value. First set to a last digit)

The height of the selected area is set to: selection. Height (I am also analyzing how to obtain this value. First set to a last digit)

The proportional value of width is set to scalex (I am also analyzing how to obtain this value. First set to a last digit)

The high proportion value is set to scalex (I am also analyzing how to obtain this value. First set to a last digit)

 

There are four things to be clarified before the following formula can be determined.

A. The size of the left and right images (the width is the same)

B. The area width and height (300px * 300px) are displayed on the left)

C. The area width and height (100px * 100px) are displayed on the right)

D. High Value of the selected area width: (this is to obtain selection. Width, selection. Height through JQ)

 

 

5.1 Get the proportion value:

Denominator: According to the third point, the width of the selected area is selection. width and the height of the selected area: selection. height must be the denominator, because the larger the value of the two groups, the smaller the graph on the right.

Molecule: 100px. That is, the width value of the area displayed on the right.

Why is it its value? Our goal is to change the width or height of the right image. Why is it associated with the width of the display area?

These three systems must be clarified. ["Select area size", "area size displayed on the right", and "image size on the right"];

The larger the area to be selected, the larger the area to be displayed on the right, the smaller the area to be displayed on the right.

(A container a can only hold 100*100 items. Now you want to store b200 * 200 items, so the container will not change, but it will only make things smaller)

The smaller the area to be selected, the smaller the size of the area to be displayed on the right, the larger the area to be displayed on the right.

(A container a can only hold 100*100 items. Now, if you want to store B50 * 50 items, the container will not change. You can only increase the number of items to fill the entire container)

Select a small area, which is equal to the size of the area displayed on the right. Do not zoom in or out. It's just right;

(A container a can only hold 100*100 items. Now you want to store B100 * 100 items, so the container will not change, and the container will not change, just fill up the entire container)

It is concluded that:

The ratio of width is set to scalex = 100/selection. width;

The high proportion value is set to scalex = 100/selection. height;

5.2 calculate the size of the right image:

Use the obtained proportional value to multiply the width and height of the right image. Here, 300 is the width and height of the right image, and the left and right are the same image. The width is the same.

Width of the right image: Math. Round (scalex * 300 ),

Height of the right image: Math. Round (scaley * 300 ),

Vi. Problems:

Selection. width;

Selection. Height

 

How can we obtain these two values?

I want to figure out the big things at the macro level first, and then write a few more articles on how to obtain the key values in it.

This plug-in is huge, and the code is complicated. Therefore, you can only go deep step by step.

 

 

This is plug-in URL: http://odyniec.net/projects/imgareaselect/