SimpleCrop is currently the only full-platform image clipping component that supports any Angle rotation and interactive experience comparable to native client image clipping.

Project address: github.com/newbieYoung… .

Features and Advantages

Compared with the current popular picture cutting components, its advantages lie in the following points:

  • Cropped pictures can be rotated at any Angle;
  • Support Script tag, wechat small program, React, Vue and other development modes;
  • Support mobile and PC devices;
  • Support boundary judgment, when there is a blank clipping box, the picture automatically adsorbs to completely fill the clipping box;
  • Mobile end zoom to double finger center as a reference point;
  • The interactive experience is comparable to the native client.

The sample

Example of wechat applets

Mobile example

On the left is the native cropping feature in IOS albums, and on the right is an example of SimpleCrop mobile.

You can scan the QR code to experience:

Or visit the following link:

Newbieyoung. Making. IO/Simple – Crop…

PC sample

Here’s the link:

Newbieyoung. Making. IO/Simple – Crop…

The key to realize

Key points to realize arbitrary Angle rotation, double finger center scaling, boundary judgment, automatic adsorption and other functions are as follows:

1. Screen coordinate system and transformation reference point

In the cropping picture scene, there are two coordinate systems, one is the actual size coordinate system represented by the cropping picture, the other is the screen coordinate system represented by the cropping frame displayed on the screen; In the subsequent transform calculation and position judgment, the size and position of the cropped picture need to be converted from the actual coordinate system to the screen coordinate system for the convenience of calculation. In addition, when the cropped image is transformed, the transform reference point is its center point by default, and the transform-Origin of the CSS is 50%, 50%.

2. Obtain real-time coordinates

First of all, it is necessary to obtain the new coordinate of clipping image after CSS Transform in real time. Only on the premise of obtaining the new coordinate after transformation in real time, it can judge the boundary crossing and adsorption by combining the coordinate of clipping frame.

When calculating the new coordinates after CSS Transform, we need to pay attention to the difference between the selected screen coordinate system and CSS Transform coordinate system. For example, in the example, the center of the black frame is the origin of the coordinate, the horizontal left is the positive direction of the X axis, and the vertical up is the positive direction of the Y axis. However, the coordinate system of CSS Transform vertically downward is the positive direction of Y-axis, which is opposite to the positive direction of Y-axis of the coordinate system specified above. Therefore, mirror transformation is also required when obtaining the real-time coordinates after obtaining the CSS Transform matrix.

The detailed calculation process can be seen in the CSS3 2D Transform Matrix.

3, rotation ADAPTS to scale

When the clipping picture is rotated at any Angle, appropriate magnification is needed to ensure that the clipping frame does not exceed the limit. Therefore, it is necessary to calculate which points of the clipping frame exceed the limit, and then calculate the magnification factor just included according to the points exceeding the limit.

When the position relation of two rectangles is arbitrarily changed, there are two schemes to calculate which points exceed each other:

It a:

In the figure, the red rectangle on the left represents the clipping picture and the black rectangle represents the clipping box. As shown in the figure, the clipping box vertex A exceeds the clipping picture.

Connect the four vertices of the rectangle to the judgment point, then calculate the Angle between the four lines, if the sum of the angles is less than 360 degrees, then the judgment point is outside the rectangle; Conversely, if the sum of the angles is equal to 360 degrees, the judgment point is in the rectangle.

a1 + a2 + a3 + a4 < 360
b1 + b2 + b3 + b4 = 360
Copy the code

Second:

The black rectangle in the figure represents the clipped picture, and the point A represents A vertex in the clipped box beyond the clipped picture.

Connect the center point of the rectangle and the judgment point, and then calculate the projection lengths (L1 and L2) of the center point and the judgment point vectors on the rectangle frame vector. As long as any projection length of the two projection lengths is greater than half of the projection frame length (H1 and H2), it means that the point is outside the rectangle.

In addition, the amplification factor that the rectangle contains exactly this point can be calculated according to the ratio of the projection length to the length of its projection border, which is the S variable in the example figure.

Finally, when rotating the picture, not only should it be properly enlarged to ensure that the clipping frame does not exceed, but also can be properly shrunk when the center point of the clipping picture does not change, so as to remove redundant gaps and further improve the interactive experience.

The calculation principle of the reduction factor is similar to that of the enlargement factor, which is to connect the judgment point and the center point, and then calculate according to the length of the frame projection.

The large rectangle represents the cropping picture, the small rectangle represents the cropping frame, and the O represents the center point of the cropping picture.

4, double finger center displacement

Because the default clipping image transformation datum is its center point, although this process is convenient to calculate, but it will cause certain difficulties to double finger scaling; Because double finger operation double finger center is not necessarily the cropping image center.

The solution needs to find the displacement difference of two different reference points first, and then carry out the displacement transformation after scaling transformation.

5, scaling adaptation transformation

In the rotation of the cropping picture can be appropriately enlarged and reduced to ensure that the cropping frame will not exceed the cropping picture; However, in the two-finger operation, scaling and clipping images cannot be done, because adaptation scaling will conflict with the user’s operation and scaling, so it is necessary to move the clipping picture to ensure that the clipping frame does not exceed the clipping picture.

When the cropping picture can contain the cropping frame after the displacement transformation, only the displacement vector needs to be calculated.

Red rectangles are cropped images and black rectangles are cropped boxes.

However, there is another case that the cropping picture cannot contain the cropping box after displacement transformation, as follows:

The solid red rectangle is the clipping picture, the black rectangle is the clipping frame, and the dotted red rectangle is the clipping picture that exactly contains the clipping frame after enlargement.

In this case, the user’s operation scaling exceeds the legal limit of the component, and adaptive scaling can be added. At this time, it is necessary to calculate the magnification coefficient of the clipping picture which exactly contains the clipping frame, and then carry out the displacement transformation.

6, other

In the whole implementation process, a large number of Canvas API operations are involved. The following points need to be paid attention to.

  • I encountered some pits when using wechat applets type 2D Canvas API. For example, Android Canvas does not support transform Style, and IOS Canvas needs to set width and height of its style before setting width and height properties, otherwise it will not take effect.

  • The maximum size of a Canvas element exceeds the maximum limit in the browser.

  • When using the Image tag to display the Image, the browser will ignore the data of the Image’s direction Angle, but when using the Canvas API to draw, it will consider the direction Angle. Pay attention to the differences between different labels when processing images. The recommended solution is to use exif.js to get the Image metadata and then use the javasjavascript load-image processing method.