jquery Image Capture Tool jquery.imagecropper.js_jquery

In addition to jquery, the plugin also references the UI library, including Ui.draggable.js
Imagecropper demo requires asp.net support. Test passed
Imagecropper Download http://www.jb51.net/jiaoben/25688.html
Plug-in usage:

Copy Code code as follows:

var imagecropper = $ (' #imgBackground '). Imagecropper ();

Note that this plugin is only applied to an IMG tag with the SRC attribute.
Parameters from the plug-in output, that is, you can intercept the picture through the server-side code, such as:

Copy Code code 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 Code code 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 comments are more complete, directly affixed to the code here:

Copy Code code as follows:

/**
* Copyright (c) Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
* Dual licensed under 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 so this is jquery Plguin only could is applied to IMG and the SRC of an img could not being null! ';
}
var defaults = {
Artwork path
ImagePath:this.attr (' src '),
Zoom level
Zoomlevel:1,
Whether the picture is centered relative to the Intercept box
Center:false,
The relative position of an intercept box and a picture
left:0, top:0,
Size of the Intercepting box
width:200, height:200,
Work Area Size
Cropworkareasize: {width:600, height:400},
The position of the intercept box relative to the workspace
Cropframerect: {center:true, top:0, left:0},
Zoom Range
Zoom: {min:0, Max:2, step:0.01},
callback function
Callbacks: {
After you move a picture
Dragging:false,
After zooming
Zoomed:false
}
};
if (options) {
Defaults = $.extend (defaults, options);
}
Return to 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"),
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 a picture
$ ('. Crop-background ', this.wrapper). Draggable ({
Containment: $ ('. Drag-containment ', This.wrapper),
Cursor: ' Move ',
Drag:function (event, UI) {
var self = $ (this). Data (' draggable ');
Move the foreground diagram 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 '
});
Get a screenshot of the top left point coordinates
Context.settings.left = Context.settings.cropframerect.left-parseint ($ (this). CSS (' left '));
Context.settings.top = Context.settings.cropframerect.top-parseint ($ (this). CSS (' top '));
Callback of Moving Pictures
Context.firecallback (context.settings.callbacks.dragging);
}
});
$ ('. Foreground-img ', this.wrapper). Draggable ({
Containment: $ ('. Drag-containment ', This.wrapper),
Cursor: ' Move ',
Drag:function (event, UI) {
var self = $ (this). Data (' draggable ');
Move 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 '
});
Get a screenshot of the top left point coordinates
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 ') );
Callback of Moving Pictures
Context.firecallback (context.settings.callbacks.dragging);
}
});
Click Zoom
$ ('. Zoom-out-button,.zoom-in-button ', This.wrapper). Click (function () {
var step = $ (this). Hasclass (' Zoom-in-button ')? Context.settings.zoom.step:-context.settings.zoom.step;
var tempzoomlevel = context.formatnumber (Context.settings.zoomLevel + step, 3);
If the zoom level is out of range or the zoom causes the picture to be not in the bottom right corner of the capture box, zoom is canceled
if (Context.settings.zoomLevel >= context.settings.zoom.min
&& 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-scroller ', this.wrapper). css (' left ', Context.settings.zoomLevel */(Context.settings.zoom.max- context.settings.zoom.min) + ' px ');
}
Context.firecallback (context.settings.callbacks.zoomed);
});
scroll bar Scaling
var cancelzoomscroll = false;
$ ('. Zoom-scroller ', 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 range or the zoom causes the picture to be not in the bottom right corner of the capture box, 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) {
Resets the scroll bar value if the zoom level is not valid
if (Cancelzoomscroll) {
$ ('. Zoom-scroller ', this.wrapper). css (' left ', Context.settings.zoomLevel */(Context.settings.zoom.max- context.settings.zoom.min) + ' px ');
}
}
});
},
Reset:function () {
this.img = new Image ();
THIS.IMG.SRC = This.settings.imagePath;
If the Interceptor box is larger than the workspace, enlarge the work area
var tempsize = {
Width:Math.max (This.settings.cropWorkAreaSize.width, This.settings.width),
Height:Math.max (This.settings.cropWorkAreaSize.height, This.settings.height)
};
If the Intercept box is centered in the workspace, reset the position of the Interceptor 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 box is centered in the picture, reset the picture's relative position to the Interceptor 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-scroller ', this.wrapper). css (' left ', This.settings.zoomLevel */(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 drag limit Box
$ ('. Drag-containment ', 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 (bit))/Math.pow (ten, bit);
},
Firecallback:function (FN) {
if ($.isfunction (FN)) {
Fn.call (this);
};
}
};
}) (JQuery);