JQuery + HttpHandler to achieve picture cropping

Body:
To make the hierarchy clear and easy to read, the whole solution is as follows:

Where Bitmapcutter.core is the server-side handler for the picture, the class diagram is:

For more information, see the Source notes:

Cutter is a crop object that stores data submitted by the client via Ajax.

Helper for the image processing class, including picture rollover (Rotateimage ()), picture cropping (Generatebitmap ()).

Callback the server-side image processing class by using cutter to encapsulate the data submitted by the client Ajax, and then call the helper method to complete the image processing.

Bitmapscissors is a httphandler that invokes the method in callback by the ' action ' returned by the client:

Note: A reflection is used here to dynamically invoke the method in the callback according to the ' action ' value, if you are not accustomed to it or think it is improper to change ...

Client Ajax submitted URL is "Scissors.axd", the actual bitmapscissors class (such as modified server-side handler, in Web.config according to the actual HttpHandler node configuration), this example:

Ok, let's start with the focus, $.fn.bitmapcutter plug-in implementation:

First to the effect of the picture, mark the Bitmapcutter in the DOM object, the amount, like just big wood fan more, come to Zhangloke:

Description:

Holder for the original load container, when the original image is too large to display only part, by panning to view the images of the display area, holder for Div, set position style for relative, so that the original IMG (the same IMG object) Position style for differs, you can control its left, the top value to the image of the translation display, note that holder overflow must be set to hidden, so that IMG will be wrapped in holder, IMG Beyond the holder boundary will be hidden.

Cutter for the Intercept box, can drag and drop to select their own interest in the interception area, drag the area in the holder container, but also in the thumbimg (principle and holder+img the same) within the generation of thumbnails.

OPTs-functional area, providing all available function buttons, including: Zoom in, zoom out, move left, right, move up, move down, restore, rotate left, rotate right.

Info-photo element, used to display the aspect ratio of the current image to be intercepted.

Principle:

Familiar with CSS words should be easy to see, using relative positioning flexibility and JS control of the CSS.