Jquery image capturing tool jquery. imagecropper. js

In addition to jquery, this plug-in also references the UI library, including ui. draggable. js.
The ImageCropper demo requires asp.net support. Test passed
ImageCropper download http://www.jb51.net/jiaoben/25688.html
Plug-in usage:
Copy codeThe Code is as follows:
Var imageCropper = $ ('# imgBackground'). imageCropper ();

Note that this plug-in only applies to the img label with the src attribute.
Parameters output by the plug-in can be captured by server code, such:
Copy codeThe Code is as follows:
$ ('# ImgCroppedImage'). attr ('src', 'cropimage. ashx? P = '+ imageCropper. settings. imagePath + '& z =' + imageCropper. settings. zoomLevel + '& t =' + imageCropper. settings. top + '& l =' + imageCropper. settings. left + '& w =' + imageCropper. settings. width + '& h =' + imageCropper. settings. height + '&' + Math. random ());

Asp.net hander CropImage. ashx:
Copy codeThe Code is as follows:
Public class CropImage: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
String imgPath = Convert. ToString (context. Request ["p"]);
Float zoomLevel = Convert. ToSingle (context. Request ["z"]);
Int top = Convert. ToInt32 (context. Request ["t"]);
Int left = Convert. ToInt32 (context. Request ["l"]);
Int width = Convert. ToInt32 (context. Request ["w"]);
Int height = Convert. ToInt32 (context. Request ["h"]);
Context. Response. ContentType = "image/jpeg ";
Crop (HttpContext. Current. Server. MapPath (imgPath), zoomLevel, top, left, width, height). WriteTo (context. Response. OutputStream );
}
Public MemoryStream Crop (string imgPath, float zoomLevel, int top, int left, int width, int height)
{
Image img = Image. FromFile (imgPath );
Bitmap bitmap = new Bitmap (width, height );
Graphics g = Graphics. FromImage (bitmap );
G. drawImage (img, new Rectangle (0, 0, width, height), new Rectangle (int) (left/zoomLevel), (int) (top/zoomLevel), (int) (width/zoomLevel), (int) (height/zoomLevel), GraphicsUnit. pixel );
MemoryStream MS = new MemoryStream ();
Bitmap. Save (MS, System. Drawing. Imaging. ImageFormat. Jpeg );
Img. Dispose ();
G. Dispose ();
Bitmap. Dispose ();
Return MS;
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}

The focus is on plug-ins. Because the source code annotations are comprehensive, directly paste the code here:
Copy codeThe Code is as follows:
/**
* Copyright (c) 2010 Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* And GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 1.0
*
* Demo: https://dl.dropbox.com/u/4390741/ImageCropper.htm
*/
; (Function ($ ){
$. Fn. extend ({
ImageCropper: function (options ){
If (! This. is ('img ') | typeof this. attr ('src') = 'undefined' | this. attr ('src') = ''){
Throw 'Please notice that this jquery plguin only cocould be applied to img and the src of img cocould not be null! ';
}
Var defaults = {
// Original image path
ImagePath: this. attr ('src '),
// Zoom level
ZoomLevel: 1,
// Whether the image is centered relative to the screenshot
Center: false,
// Relative position of the captured frame and Image
Left: 0, top: 0,
// Size of the screenshot box
Width: 200, width: 200,
// Workspace size
CropWorkAreaSize: {width: 600, height: 400 },
// Position of the screenshot frame relative to the Workspace
CropFrameRect: {center: true, top: 0, left: 0 },
// Zoom range
Zoom: {min: 0, max: 2, step: 0.01 },
// Callback function
Callbacks :{
// Move the image
Dragging: false,
// After scaling
Zoomed: false
}
};
If (options ){
Defaults = $. extend (defaults, options );
}
Return new imageCropper (this, defaults );
}
});
Function imageCropper (image, settings ){
This. init (image, settings );
};
ImageCropper. prototype = {
Settings: false,
Wrapper: $ ('<div class = "image-cropper-wrapper"/> '),
ZoomWrapper: $ ('<div class = "zoom-wrapper"> <div class = "zoom-out-button"/> <div class = "zoom-scrollbar"> <div class = "zoom-scroller"/> </div> <div class = "zoom-in-button"/> </div> '),
Img: false,
Init: function (image, settings ){
Var context = this;
This. settings = settings;
Image. addClass ('background-img ');
// Generate html
Image. wrap (this. wrapper ). wrap ('<div class = "crop-work-area"/> '). wrap ('<div class = "crop-background"/> ');
This. wrapper = $ ('. image-cropper-wrapper ');
$ ('. Crop-work-area ', this. wrapper ). append ('<div class = "crop-frame"> </div> <div class = "drag-containment "/> ');
This. wrapper. append (this. zoomWrapper );
$ ('. Image-cropper-wrapper', this. wrapper). disableSelection ();
This. reset ();
// Drag the image
$ ('. Crop-background', this. wrapper). draggable ({
Containment: $ ('. drag-ininment', this. wrapper ),
Cursor: 'move ',
Drag: function (event, ui ){
Var self = $ (this). data ('draggable ');
// Move the foreground chart at the same time
$ ('. Foreground-img', this.wrapper).css ({
Left: (parseInt (self. position. left)-context. settings. cropFrameRect. left-1) + 'px ',
Top: (parseInt (self. position. top)-context. settings. cropFrameRect. top-1) + 'px'
});
// Obtain the coordinates of the top left Vertex
Context. settings. left = context. settings. cropFrameRect. left-parseint(%(this%.css ('left '));
Context. settings. top = context. settings. cropFrameRect. top-parseint((this).css ('top '));
// Move the image callback
Context. fireCallback (context. settings. callbacks. dragging );
}
});
$ ('. Foreground-img', this. wrapper). draggable ({
Containment: $ ('. drag-ininment', this. wrapper ),
Cursor: 'move ',
Drag: function (event, ui ){
Var self = $ (this). data ('draggable ');
// Move the background at the same time
$ ('. Crop-background', this.wrapper).css ({
Left: (parseInt (self. position. left) + context. settings. cropFrameRect. left + 1) + 'px ',
Top: (parseInt (self. position. top) + context. settings. cropFrameRect. top + 1) + 'px'
});
// Obtain the coordinates of the top left Vertex
Context. settings. left = context. settings. cropFrameRect. left-parseInt ($ ('. crop-background', this.wrapper..css ('left '));
Context. settings. top = context. settings. cropFrameRect. top-parseInt ($ ('. crop-background', this.wrapper..css ('top '));
// Move the image callback
Context. fireCallback (context. settings. callbacks. dragging );
}
});
// Click zoom
$ ('. Zoom-out-button,. zoom-in-button', this. wrapper). click (function (){
Var step = $ (this). hasClass ('zoom-in-click ')? Context. settings. zoom. step:-context. settings. zoom. step;
Var tempZoomLevel = context. formatNumber (context. settings. zoomLevel + step, 3 );
// If the zoom level is out of the range or the zoom level causes the image to be not in the lower right corner of the screenshot box, the Zoom is canceled.
If (context. settings. zoomLevel> = context. settings. zoom. min
& Amp; context. settings. zoomLevel <= context. settings. zoom. max
& ParseInt ($ ('. crop-background ', this.wrapper).css ('left') + tempZoomLevel * context. img. width> context. settings. cropFrameRect. left + context. settings. width
& ParseInt ($ ('. crop-background ', this.wrapper..css ('top') + tempZoomLevel * context. img. height> context. settings. cropFrameRect. top + context. settings. height
){
Context. settings. zoomLevel = tempZoomLevel;
Context. zoom (context. img. width * context. settings. zoomLevel, context. img. height * context. settings. zoomLevel );
$ ('. Zoom-scroler', this.wrapper..css ('left', context. settings. zoomLevel * 200/(context. settings. zoom. max-context. settings. zoom. min) + 'px ');
}
Context. fireCallback (context. settings. callbacks. zoomed );
});
// Scroll bar Scaling
Var cancelZoomScroll = false;
$ ('. Zoom-scroler', this. wrapper). draggable ({
Containment: $ ('. zoom-scrollbar', this. wrapper ),
Axis: 'X ',
Drag: function (event, ui ){
Var tempZoomLevel = (context. settings. zoom. max-context. settings. zoom. min) * parseint(+(this+.css ('left')/200;
// If the zoom level is out of the range or the zoom level causes the image to be not in the lower right corner of the screenshot box, the Zoom is canceled.
If (parseInt ($ ('. crop-background ', this.wrapper).css ('left') + tempZoomLevel * context. img. width> context. settings. cropFrameRect. left + context. settings. width
& ParseInt ($ ('. crop-background ', this.wrapper..css ('top') + tempZoomLevel * context. img. height> context. settings. cropFrameRect. top + context. settings. height
){
Context. settings. zoomLevel = tempZoomLevel;
Context. zoom (context. img. width * context. settings. zoomLevel, context. img. height * context. settings. zoomLevel );
CancelZoomScroll = false;
Context. fireCallback (context. settings. callbacks. zoomed );
}
Else {
CancelZoomScroll = true;
}
},
Stop: function (event, ui ){
// Reset the value of the scroll bar if the scaling level is invalid
If (cancelZoomScroll ){
$ ('. Zoom-scroler', this.wrapper..css ('left', context. settings. zoomLevel * 200/(context. settings. zoom. max-context. settings. zoom. min) + 'px ');
}
}
});
},
Reset: function (){
This. img = new Image ();
This. img. src = this. settings. imagePath;
// If the screenshot box is greater than the workspace, the workspace is enlarged.
Var tempSize = {
Width: Math. max (this. settings. cropWorkAreaSize. width, this. settings. width ),
Height: Math. max (this. settings. cropWorkAreaSize. height, this. settings. height)
};
// If the screenshot box is centered in the workspace, reset the position of the screenshot box.
If (this. settings. cropFrameRect. center ){
This. settings. cropFrameRect. left = (tempSize. width-this. settings. width)/2;
This. settings. cropFrameRect. top = (tempSize. height-this. settings. height)/2;
}
// If the screenshot box is centered in the image, reset the relative position of the image and the screenshot box.
If (this. settings. center ){
This. settings. left = (this. img. width * this. settings. zoomLevel-this. settings. width)/2;
This. settings. top = (this. img. height * this. settings. zoomLevel-this. settings. height)/2;
}
This. wrapper. width (tempSize. width + 2). height (tempSize. height + 25 );
$ ('. Foreground-img,. background-img', this. wrapper). attr ('src', this. settings. imagePath );
$ ('. Crop-work-area', this. wrapper). width (tempSize. width). height (tempSize. height );
$ ('. Crop-frame', this.wrapper).css ({
Left: this. settings. cropFrameRect. left + 'px ',
Top: this. settings. cropFrameRect. top + 'px ',
Width: this. settings. width + 'px ',
Height: this. settings. height + 'px'
});
$ ('. Foreground-img', this.wrapper).css ({
Left: (-this. settings. cropFrameRect. left-1) + 'px ',
Top: (-this. settings. cropFrameRect. top-1) + 'px'
});
$ ('. Zoom-scroler', this.wrapper..css ('left', this. settings. zoomLevel * 200/(this. settings. zoom. max-this. settings. zoom. min) + 'px ');
$ ('. Crop-background', this.wrapper).css ({
Opacity: 0.3,
Left: this. settings. cropFrameRect. left-this. settings. left + 'px ',
Top: this. settings. cropFrameRect. top-this. settings. top + 'px'
});
$ ('. Foreground-img', this.wrapper).css ({
Left:-this. settings. left + 'px ',
Top:-this. settings. top + 'px'
});
This. settings. left = this. settings. cropFrameRect. left-parseInt ($ ('. crop-background', this.wrapper..css ('left '));
This. settings. top = this. settings. cropFrameRect. top-parseInt ($ ('. crop-background', this.wrapper..css ('top '));
This. zoom (this. img. width * this. settings. zoomLevel, this. img. height * this. settings. zoomLevel );
},
Zoom: function (width, height ){
$ ('. Crop-background,. background-img,. foreground-img', this. wrapper). width (width). height (height );
// Adjust the drag limit box
$ ('. Drag-ininment', this.wrapper).css ({
Left: this. settings. cropFrameRect. left + this. settings. width-this. settings. zoomLevel * this. img. width + 1 + 'px ',
Top: this. settings. cropFrameRect. top + this. settings. height-this. settings. zoomLevel * this. img. height + 1 + 'px ',
Width: 2 * this. settings. zoomLevel * this. img. width-this. settings. width + 'px ',
Height: 2 * this. settings. zoomLevel * this. img. height-this. settings. height + 'px'
});
},
FormatNumber: function (number, bit ){
Return Math. round (number * Math. pow (10, bit)/Math. pow (10, bit );
},
FireCallback: function (fn ){
If ($. isFunction (fn )){
Fn. call (this );
};
}
};
}) (JQuery );