JQuery achieves the upload function example of simulating flash Avatar cropping, and jquery Cropping

JQuery achieves the upload function example of simulating flash Avatar cropping, and jquery Cropping

This example describes how jQuery can simulate the cropping and uploading of flash pictures. We will share this with you for your reference. The details are as follows:

Yes, jq already has a similar plug-in, or you can simply use flash. Why should I write it myself? Because building (wo) Wheel (bu) sub (hui) is also a learning process, and the wheel won't be made. How can we build planes in the future? Let's take a final look:

I. general ideas

To do this with js, you must first upload image A to the server. There are many plug-ins for asynchronous upload. You can refer to my previous blog to upload images in pure js mode without using plug-ins, the uploaded image is displayed on the page after the upload. because the size of the uploaded image is different, to completely display the image, you must use css to control the proportional scaling of the uploaded image, then, select the desired part from the Rectangular Box selection box, use js to obtain the coordinates in the upper left corner of the Rectangular Box selection box, and add the width and height of the selected box to the base after proportional calculation, the background program crops the image B according to the passed parameters, returns it to the foreground, and deletes the uploaded source image A, saving space.

Ii. Analysis

The image is divided into two parts: the left part, the left part, and a rectangular selection area. There is a translucent mask between the image and the selection area, but this will cover the selection area, there is no effect selected from the above box. In fact, the structure is as follows: from bottom to top, there are 1 picture layer, 2 mask layer, and 3 selection layer (a div, absolute positioning), 4 picture layers (absolute positioning ). The images on the 1st and 4th layers are the same, and the size and left and top values are the same. Adding overflow: hidden to the selection layer on the 3rd layer shows the above effect, the dotted border and the eight dragged points will be discussed later. Their hierarchical relationships are intuitively illustrated. The gray part of layer 3rd is the hidden part of overflow: hidden:

The figure shows that the positions of the left and right sides of the border are different, but the principle is emphasized. Next, you can drag the selection part and use the drag principle: press the mouse to record var disx = event. clientX, var disy = event. clientY, drag to calculate the current event. the difference between clientX and disx is x, the current event. the difference between clientY and disy is y. Set the left value of the 4th-layer image to the current offsetLeft + disx, and the top value to offsetTop + disy. For example, if the selection area moves 10 Px to the left, because the 4th layer can only move within the range of the 1st layer, the left value of the 4th layer is equal to the left value of the negative 3rd layer, and the top value is the same. Drag schematic:

The selected area size can be changed proportionally. This requires 8 points around the selected area. For example, it can be divided into four parts:

The event triggered by vertices in each part is the same. The event triggered by four parts changes the size of the selected area. The difference is that Part 1 changes the left and top values of the selected area at the same time, the top and left values of the selected area are changed in sections 2nd and 4th, respectively. The left and top values of the selected area are not changed in section 3rd. The principles of the four parts are the same. Let's talk about the things in Part 1. Click the point in Part 2 and drag it to the upper left corner. When the selection area increases, set its left and top values (which will decrease ), the value reduced by left is equal to the value increased by the selected area. The calculation method of this value is the same as the drag principle. The drag and drop operations must be within the entire image range.

After selecting the part to be truncated, obtain the coordinates in the upper-left corner of the current constituency (Layer 1), that is, the offsetLeft and offsetTop values of layer 4th, and then obtain the width and height of the selected area, these four values cannot be directly transmitted to the background, because the image may be scaled, and the background is captured based on the source image size, the original width and height of the image need to be obtained after the image is uploaded, and a ratio is obtained to the display width and height of the image on the page. multiplying these four values by the value is required by the background.

As for the border of the selected area, you can simply set border: 1px dashed # fff. A better way is to put the four positions: absolute div, which are respectively fixed on the upper and lower sides of the selected area, with a width of 100% up and down, 1 px in height, 1 px in width on the left and right, and 100% in height. The background is set to a ripple GIF image. The repeat effect is amazing!

The three images on the right are only for display. The displayed content is the selected area on the left, and the size of the selected area can be changed, the size and position of the image on the right change with the selection area. After the image is uploaded, the selected area has a default width and height, and the three boxes on the right are fixed in width and height, according to the ratio obtained by dividing the constituency width from the width of the three boxes on the right, we can calculate the size of the picture in the three boxes on the right. The display principle is the same as that on the left, only 1st and 2 layers are missing compared to the left side.

This method has the advantages of pure js and good compatibility. In addition, you can perform a feature check. HTML5 browsers can directly cut images at the front end. The disadvantage is that you need to upload images before cropping. The source code is later pasted.

Iii. Source Code

<! DOCTYPE html>