JavaScript image cutting effect (magnifying glass)

Because it was the first time to come into contact with this kind of effect in the previous version, and three major functions were developed together, the ability was limited, so it was just a matter of achieving the effect.
Recently, I have studied the drag-and-drop effect and the zoom effect separately. After sorting and improving them, I then incorporated the cutting effect. Personally, I feel that the effect is already good.
It should be noted that this is just an effect, not a real cutting picture. To get the real cutting picture, please refer to the picture cutting system.

There is too much code to post, so I have to give you a rendering:

Program description

This effect is mainly divided into three parts: drag and drop of layers; Zooming, picture cutting (including preview).
Among them, layer drag and drop and layer scaling have been explained in detail in two other articles. Let’s talk about the picture cutting part here.

Picture cutting

Regarding the design of picture cutting, there are three methods:

Set the picture as the background image, which is achieved by setting the position of the background image, but this has the disadvantages It can only be realized according to the normal proportion of the picture, which is not flexible enough;
Put the picture into the cutting object and set the top and left of the picture. This method is feasible, but there is a simpler method below;
This is achieved by setting the clip of the image.
Here is the implementation method of method 3. This method is seen from the "collection" code of the year. Let's talk about clip first:
The function of clip is to "retrieve or set the visible area of ​​the object. Visible The part outside the area is transparent. ”
Provides four offset values ​​calculated from the upper left corner of the object for (0,0) coordinates in the order of top-right-bottom-left to clip.
For example:

Copy code The code is as follows:

p { position:absolute; width:60px; height:60px; clip: rect(0 20 50 10); }

Note that position:absolute setting is required (see the manual for details).
Let’s talk about the specific implementation principle:

First you need a container (_Container), in which three layers will be inserted:

Base layer (_layBase): the translucent image ;
Cut layer (_layCropper): the part that is displayed normally;
Control layer (_layHandle): the part that controls the display.
Among them, the base layer and cutting layer are pictures automatically created by the program, and the control layer is a self-defined layer (a p in the program).
The base layer and the cutting layer must completely overlap. Both layers are absolutely positioned to the upper left corner in the program:

Copy the code The code is as follows:

this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;

The stacking order must also be set to ensure the order of each layer.