JavaScript simulates flash avatar crop upload

Yes, JQ already has a similar plug-in, or simply use flash forget it, why do I have to write it myself? Because the Creation (wo) (bu) (Hui) is also a learning process, the wheel will not be built, how to build a plane in the future? Let's start with a final one:

First, the approximate idea

With JS to do this effect, the first to upload the picture A to the server, about the asynchronous upload plugin has a lot of plug-ins can also refer to my previous blog with a pure JS upload, uploaded to the page after uploading, due to upload the picture size is different, to display the picture completely, It is necessary to upload the image with the CSS control to scale the display, and then through the rectangular marquee selection of the desired part, with JS to get the upper-left corner of the rectangle marquee coordinates, plus the width of the box to the background, the background program according to the parameters to cut to get the picture B back to the foreground and the uploaded original a deleted, Save space.

Second, analysis

will be divided into two parts, first look at the left, a picture with a rectangular selection, the picture and the selection has a layer of translucent matte, but this will be a part of the selection block, there is no such a box selected effect, in fact, the structure is this: from the bottom to the top are 1 picture layer, 2 mask layer, 3 selection layer (one div, absolute positioning), 4 picture layer (absolute positioning). The 1th and 4th layers of the picture is the same, the size and left, top value is the same, to the 3rd layer of the selection layer added a overflow:hidden, it shows the above effect, the dashed border and drag 8 points after the text will be discussed. They are more visually illustrated by their hierarchical relationships, and the 3rd Gray Section is the hidden part of Overflow:hidden:

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

The size of the selection can vary proportionally, which requires 8 points around the selection, such as 4 sections:

Each part of the point triggered by the same event, the 4-part triggered event is to change the size of the selection, the difference is that the 1th chapter changes the selection of the left and top values, the 2nd and 4 are only changes to the selection of the top of the selected values, Part 3rd does not change the left and top values of the selection. 4 parts of the principle are the same, take the 1th locutionary thing, click on the 1th part of the point to the upper left corner of the drag, the selection becomes larger at the same time to set the value of the leftmost and top (will be reduced), and left to reduce the value just equal to the value of the selection, this value calculation method and drag principle. You need to limit the scope of the drag process, not beyond the entire picture.

After selecting the part that needs to be intercepted, get the coordinates of the upper left corner of the current selection (4th level), that is, the offsetleft, offsettop value of the 4th layer, and then get the width height of the selection, these 4 values cannot be passed directly back to the platform, because the picture at this time may be truncated, the latter is based on the size Then you need to get the original width of the image after the picture is uploaded, and the picture in the page to show the width of a ratio, the 4 values multiplied by the scale of the value is the back-end needs.

As for the border of the constituency, do a simple point can be directly set border:1px dashed #fff, the better way is to put four position:absolute Div, respectively fixed in the upper and lower of the selection, up and down width 100%, high 1px, width 1px, height 100%, The background is set to a wavy GIF picture, repeat, the effect is amazing!

The right part of the 3 pictures is only displayed, the content is selected in the left selection, and the size of the selection can be changed, so the right image size and position is changed with the selection. After selecting the image upload, the selection has a default width height, the right 3 box width height is fixed, according to the width of the selection and the right three boxes of the width of the ratio can be calculated to the right three boxes within the size of the picture should show the principle of the left, compared to the left only less than the 1th, 2 layer.

The advantage of this way is pure JS, compatibility, but also can do a feature detection, support HTML5 browser can be directly in the front-end cutting pictures, the disadvantage is to choose to select the image upload before the cutting. The source code is posted late.

JavaScript simulates flash avatar crop upload