jquery implementation Simulation Flash Avatar trim upload Function Example _jquery

The example of this article describes the implementation of jquery simulation flash avatar cutting upload function. Share to everyone for your reference, specific as follows:

Yes, JQ already have similar plug-ins, or simply use Flash to forget, why do I have to write? Since the making of (wo) Wheel (BU) (Hui) is also a learning process, the wheel will not be made, how will the aircraft be built in the future? Let's start with a final picture:

One, probably thinking

Use JS to do this effect, first have to upload a picture to the server, on the asynchronous upload plug-ins have a lot of plug-ins can also refer to my previous blog with a pure JS way to upload, after uploading to the page, due to upload the picture size is different, to complete the display of pictures, You will upload the image with CSS control proportional scaling display, and then through the selection of rectangular box to select the necessary parts, with JS to get the rectangular box of the upper-left corner coordinates, plus the width of the marquee box to the background, the background program according to the parameters to cut to get picture B back to the foreground and upload the original a delete, Save space.

Second, analysis

The effect chart is divided into the left and right parts, with a picture and a rectangular selection. There is a translucent mask between the picture and the selection, but in this case it will be covered with a section of the selection, there is no effect on the above box, in fact the structure is: from the bottom up is 1 picture layer, 2 mask layer, 3 constituency layer (a div, absolute positioning), 4 picture layer (absolute positioning). The 1th and 4th layers of the picture is the same, the size and left, the top value is the same, to the 3rd layer of the selection layer add a overflow:hidden, it shows the above effect, dotted border and drag 8 points after the text will be mentioned. The following figure illustrates their hierarchical relationships visually, and the 3rd layer of gray is the Overflow:hidden hidden part:

After the diagram found that the left and right sides of the box is not the same position, but emphasis on the principle of explanation. Next, the selection section can be dragged, using the drag-and-drop principle: mouse down, record var disx=event.clientx,var disy= Event.clienty, drag, calculate the current Event.clientx and DISX difference is x, the current event.clienty and disy the difference is Y, set the left value of layer 4th picture is the picture of the current OFFSETLEFT+DISX, The top value is Offsettop+disy. If the selection moves to the left 10px, because the 4th layer can only move within the 1th-level range, then the right of the 4th level is equal to the negative 3rd, and the top value is the same. Drag and drop schematic diagram:

The selection size can vary proportionally, which requires 8 points around the selection, which can be divided into 4 parts:

The dots in each section are the same, and the 4-part triggering event is changing the size of the selection, and the difference is that the 1th chapter changes the left and top values of the selection, and the 2nd and Part 4 changes only the tops and values of the selections, The 3rd part does not change the left and top values of the selection. 4 parts of the principle are the same, take the 1th part of the locutionary, click on the 1th part of the point to drag in the upper left corner, the selection will be larger and set its top and right values (decreases), while the left to reduce the value is just equal to the value of the selection, the value of the calculation method with the drag principle. Drag-and-drop procedures need to limit the scope, can not exceed the entire picture range.

When you select the part that you want to intercept, get the coordinates of the upper-left corner of the current selection (layer 4th). That is, the 4th layer of offsetleft, offsettop value, and then get the width of the selection, the 4 values can not be directly back to Taiwan, because at this time the picture may be retracted, the latter is based on the original size to intercept, Then you need to upload the picture after the original width and height, and the picture displayed in the page is a percentage of the width of the 4 values multiplied by this ratio is the background needed.

As for the selection of the border, do a simple point can be set directly border:1px dashed #fff, a better way is to put four Position:absolute Div, fixed in the selection of the top and bottom, up and down 100%, high 1px, about the width of 1px, high 100%, The background is set to a wavy GIF picture, repeat, the effect is stunning!

The 3 pictures on the right side are just for display, the content is the selected part of the left selection, and the size of the selection can be changed, so the size and position of the picture on the right is changed with the change of the selection. When you choose to upload a picture, the selection has a default width and height, the right 3 box width is fixed, according to the width of the selection and the width of the three boxes to the right of the ratio can be calculated to the right three boxes in the picture should show the size, the display principle with the left, compared to the left is only less than the 1th, 2 layers.

This way the advantage is pure JS, compatibility is good, also can do a feature detection, support HTML5 browser can be directly in front of the cutting picture, the disadvantage is to select the picture before cutting the upload. The source code later posted up.

Third, the source code

<! DOCTYPE html>  

For more information on jquery-related content readers can view the site topics: "jquery common Plug-ins and Usage summary", "JQuery Extended Skills Summary", "jquery switching effects and Skills summary", "jquery traversal algorithm and Skills summary", " jquery Common Classic Effects Summary "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.