jquery插件:图片截取工具jquery.imagecropper.js
工作需要参考网上的一些代码做了个图片截取工具,最后干脆封装成一个jquery的插件。
除了jquery,本插件还引用了UI库,包括ui.draggable.js
插件用法:
1 var imageCropper = $('#imgBackground').imageCropper();
要注意的是此插件只应用在有src属性的img标签上。
通过插件输出的参数,即可以通过服务器端代码截取图片,比如:
1 $('#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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 public class CropImage : IHttpHandler
2 {
3 public void ProcessRequest(HttpContext context)
4 {
5 string imgPath = Convert.ToString(context.Request["p"]);
6 float zoomLevel = Convert.ToSingle(context.Request["z"]);
7 int top = Convert.ToInt32(context.Request["t"]);
8 int left = Convert.ToInt32(context.Request["l"]);
9 int width = Convert.ToInt32(context.Request["w"]);
10 int height = Convert.ToInt32(context.Request["h"]);
11 context.Response.ContentType = "image/jpeg";
12 Crop(HttpContext.Current.Server.MapPath(imgPath), zoomLevel, top, left, width, height).WriteTo(context.Response.OutputStream);
13 }
14
15 public MemoryStream Crop(string imgPath, float zoomLevel, int top, int left, int width, int height)
16 {
17 Image img = Image.FromFile(imgPath);
18 Bitmap bitmap = new Bitmap(width, height);
19 Graphics g = Graphics.FromImage(bitmap);
20 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);
21 MemoryStream ms = new MemoryStream();
22 bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
23 img.Dispose();
24 g.Dispose();
25 bitmap.Dispose();
26 return ms;
27 }
28
29 public bool IsReusable
30 {
31 get
32 {
33 return false;
34 }
35 }
36 }
2 {
3 public void ProcessRequest(HttpContext context)
4 {
5 string imgPath = Convert.ToString(context.Request["p"]);
6 float zoomLevel = Convert.ToSingle(context.Request["z"]);
7 int top = Convert.ToInt32(context.Request["t"]);
8 int left = Convert.ToInt32(context.Request["l"]);
9 int width = Convert.ToInt32(context.Request["w"]);
10 int height = Convert.ToInt32(context.Request["h"]);
11 context.Response.ContentType = "image/jpeg";
12 Crop(HttpContext.Current.Server.MapPath(imgPath), zoomLevel, top, left, width, height).WriteTo(context.Response.OutputStream);
13 }
14
15 public MemoryStream Crop(string imgPath, float zoomLevel, int top, int left, int width, int height)
16 {
17 Image img = Image.FromFile(imgPath);
18 Bitmap bitmap = new Bitmap(width, height);
19 Graphics g = Graphics.FromImage(bitmap);
20 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);
21 MemoryStream ms = new MemoryStream();
22 bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
23 img.Dispose();
24 g.Dispose();
25 bitmap.Dispose();
26 return ms;
27 }
28
29 public bool IsReusable
30 {
31 get
32 {
33 return false;
34 }
35 }
36 }
重点是插件,因为源代码注释比较全,直接贴代码在这:
1 /**
2 * Copyright (c) 2010 Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
5 *
6 * Version: 1.0
7 *
8 * Demo: https://dl.dropbox.com/u/4390741/ImageCropper.htm
9 */
10 ; (function($) {
11 $.fn.extend({
12 imageCropper: function(options) {
13 if (!this.is('img') || typeof this.attr('src') == 'undefined' || this.attr('src') == '') {
14 throw 'Please notice that this jquery plguin only could be applied to img and the src of img could not be null!';
15 }
16 var defaults = {
17 //原图路径
18 imagePath: this.attr('src'),
19 //缩放级别
20 zoomLevel: 1,
21 //图片相对于截取框是否居中
22 center: false,
23 //截取框与图片的相对位置
24 left: 0, top: 0,
25 //截取框的大小
26 width: 200, height: 200,
27 //工作区大小
28 cropWorkAreaSize: { width: 600, height: 400 },
29 //截取框相对于工作区的位置
30 cropFrameRect: { center: true, top: 0, left: 0 },
31 //缩放范围
32 zoom: { min: 0, max: 2, step: 0.01 },
33 //回调函数
34 callbacks: {
35 //移动图片后
36 dragging: false,
37 //缩放后
38 zoomed: false
39 }
40 };
41 if (options) {
42 defaults = $.extend(defaults, options);
43 }
44 return new imageCropper(this, defaults);
45 }
46 });
47
48 function imageCropper(image, settings) {
49 this.init(image, settings);
50 };
51
52 imageCropper.prototype = {
53 settings: false,
54 wrapper: $('<div class="image-cropper-wrapper"/>'),
55 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>'),
56 img: false,
57 init: function(image, settings) {
58 var context = this;
59 this.settings = settings;
60 image.addClass('background-img');
61 //生成html
62 image.wrap(this.wrapper).wrap('<div class="crop-work-area"/>').wrap('<div class="crop-background"/>');
63 this.wrapper = $('.image-cropper-wrapper');
64 $('.crop-work-area', this.wrapper).append('<div class="crop-frame"><img class="foreground-img" src="" /></div><div class="drag-containment"/>');
65 this.wrapper.append(this.zoomWrapper);
66
67 $('.image-cropper-wrapper', this.wrapper).disableSelection();
68 this.reset();
69
70 //图片的拖动
71 $('.crop-background', this.wrapper).draggable({
72 containment: $('.drag-containment', this.wrapper),
73 cursor: 'move',
74 drag: function(event, ui) {
75 var self = $(this).data('draggable');
76 //同时移动前景图
77 $('.foreground-img', this.wrapper).css({
78 left: (parseInt(self.position.left) - context.settings.cropFrameRect.left - 1) + 'px',
79 top: (parseInt(self.position.top) - context.settings.cropFrameRect.top - 1) + 'px'
80 });
81 //得到截图左上点坐标
82 context.settings.left = context.settings.cropFrameRect.left - parseInt($(this).css('left'));
83 context.settings.top = context.settings.cropFrameRect.top - parseInt($(this).css('top'));
84 //移动图片的callback
85 context.fireCallback(context.settings.callbacks.dragging);
86 }
87 });
88 $('.foreground-img', this.wrapper).draggable({
89 containment: $('.drag-containment', this.wrapper),
90 cursor: 'move',
91 drag: function(event, ui) {
92 var self = $(this).data('draggable');
93 //同时移动背景
94 $('.crop-background', this.wrapper).css({
95 left: (parseInt(self.position.left) + context.settings.cropFrameRect.left + 1) + 'px',
96 top: (parseInt(self.position.top) + context.settings.cropFrameRect.top + 1) + 'px'
97 });
98 //得到截图左上点坐标
99 context.settings.left = context.settings.cropFrameRect.left - parseInt($('.crop-background', this.wrapper).css('left'));
100 context.settings.top = context.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css('top'));
101 //移动图片的callback
102 context.fireCallback(context.settings.callbacks.dragging);
103 }
104 });
105 //点击缩放
106 $('.zoom-out-button,.zoom-in-button', this.wrapper).click(function() {
107 var step = $(this).hasClass('zoom-in-button') ? context.settings.zoom.step : -context.settings.zoom.step;
108 var tempZoomLevel = context.formatNumber(context.settings.zoomLevel + step, 3);
109 //如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
110 if (context.settings.zoomLevel >= context.settings.zoom.min
111 && context.settings.zoomLevel <= context.settings.zoom.max
112 && parseInt($('.crop-background', this.wrapper).css('left')) + tempZoomLevel * context.img.width > context.settings.cropFrameRect.left + context.settings.width
113 && parseInt($('.crop-background', this.wrapper).css('top')) + tempZoomLevel * context.img.height > context.settings.cropFrameRect.top + context.settings.height
114 ) {
115 context.settings.zoomLevel = tempZoomLevel;
116 context.zoom(context.img.width * context.settings.zoomLevel, context.img.height * context.settings.zoomLevel);
117 $('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom.min) + 'px');
118 }
119 context.fireCallback(context.settings.callbacks.zoomed);
120 });
121 //滚动条缩放
122 var cancelZoomScroll = false;
123 $('.zoom-scroller', this.wrapper).draggable({
124 containment: $('.zoom-scrollbar', this.wrapper),
125 axis: 'x',
126 drag: function(event, ui) {
127 var tempZoomLevel = (context.settings.zoom.max - context.settings.zoom.min) * parseInt($(this).css('left')) / 200;
128 //如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
129 if (parseInt($('.crop-background', this.wrapper).css('left')) + tempZoomLevel * context.img.width > context.settings.cropFrameRect.left + context.settings.width
130 && parseInt($('.crop-background', this.wrapper).css('top')) + tempZoomLevel * context.img.height > context.settings.cropFrameRect.top + context.settings.height
131 ) {
132 context.settings.zoomLevel = tempZoomLevel;
133 context.zoom(context.img.width * context.settings.zoomLevel, context.img.height * context.settings.zoomLevel);
134 cancelZoomScroll = false;
135 context.fireCallback(context.settings.callbacks.zoomed);
136 }
137 else {
138 cancelZoomScroll = true;
139 }
140 },
141 stop: function(event, ui) {
142 //如果缩放级别无效 则重置滚动条的值
143 if (cancelZoomScroll) {
144 $('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom.min) + 'px');
145 }
146 }
147 });
148 },
149 reset: function() {
150 this.img = new Image();
151 this.img.src = this.settings.imagePath;
152 //截取框大于工作区,则放大工作区
153 var tempSize = {
154 width: Math.max(this.settings.cropWorkAreaSize.width, this.settings.width),
155 height: Math.max(this.settings.cropWorkAreaSize.height, this.settings.height)
156 };
157 //如果截取框在工作区中居中,则重新设置截取框的位置
158 if (this.settings.cropFrameRect.center) {
159 this.settings.cropFrameRect.left = (tempSize.width - this.settings.width) / 2;
160 this.settings.cropFrameRect.top = (tempSize.height - this.settings.height) / 2;
161 }
162 //如果截取框在图片中居中,则重新设置图片与截取框的相对位置
163 if (this.settings.center) {
164 this.settings.left = (this.img.width * this.settings.zoomLevel - this.settings.width) / 2;
165 this.settings.top = (this.img.height * this.settings.zoomLevel - this.settings.height) / 2;
166 }
167
168 this.wrapper.width(tempSize.width + 2).height(tempSize.height + 25);
169 $('.foreground-img,.background-img', this.wrapper).attr('src', this.settings.imagePath);
170 $('.crop-work-area', this.wrapper).width(tempSize.width).height(tempSize.height);
171 $('.crop-frame', this.wrapper).css({
172 left: this.settings.cropFrameRect.left + 'px',
173 top: this.settings.cropFrameRect.top + 'px',
174 width: this.settings.width + 'px',
175 height: this.settings.height + 'px'
176 });
177 $('.foreground-img', this.wrapper).css({
178 left: (-this.settings.cropFrameRect.left - 1) + 'px',
179 top: (-this.settings.cropFrameRect.top - 1) + 'px'
180 });
181 $('.zoom-scroller', this.wrapper).css('left', this.settings.zoomLevel * 200 / (this.settings.zoom.max - this.settings.zoom.min) + 'px');
182
183
184 $('.crop-background', this.wrapper).css({
185 opacity: 0.3,
186 left: this.settings.cropFrameRect.left - this.settings.left + 'px',
187 top: this.settings.cropFrameRect.top - this.settings.top + 'px'
188 });
189 $('.foreground-img', this.wrapper).css({
190 left: -this.settings.left + 'px',
191 top: -this.settings.top + 'px'
192 });
193
194 this.settings.left = this.settings.cropFrameRect.left - parseInt($('.crop-background', this.wrapper).css('left'));
195 this.settings.top = this.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css('top'));
196
197 this.zoom(this.img.width * this.settings.zoomLevel, this.img.height * this.settings.zoomLevel);
198 },
199 zoom: function(width, height) {
200 $('.crop-background, .background-img, .foreground-img', this.wrapper).width(width).height(height);
201 //调整拖动限制框
202 $('.drag-containment', this.wrapper).css({
203 left: this.settings.cropFrameRect.left + this.settings.width - this.settings.zoomLevel * this.img.width + 1 + 'px',
204 top: this.settings.cropFrameRect.top + this.settings.height - this.settings.zoomLevel * this.img.height + 1 + 'px',
205 width: 2 * this.settings.zoomLevel * this.img.width - this.settings.width + 'px',
206 height: 2 * this.settings.zoomLevel * this.img.height - this.settings.height + 'px'
207 });
208 },
209 formatNumber: function(number, bit) {
210 return Math.round(number * Math.pow(10, bit)) / Math.pow(10, bit);
211 },
212 fireCallback: function(fn) {
213 if ($.isFunction(fn)) {
214 fn.call(this);
215 };
216 }
217 };
218 })(jQuery);
219
2 * Copyright (c) 2010 Viewercq (http://www.cnblogs.com/viewercq/archive/2010/04/04/1704093.html)
3 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
4 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
5 *
6 * Version: 1.0
7 *
8 * Demo: https://dl.dropbox.com/u/4390741/ImageCropper.htm
9 */
10 ; (function($) {
11 $.fn.extend({
12 imageCropper: function(options) {
13 if (!this.is('img') || typeof this.attr('src') == 'undefined' || this.attr('src') == '') {
14 throw 'Please notice that this jquery plguin only could be applied to img and the src of img could not be null!';
15 }
16 var defaults = {
17 //原图路径
18 imagePath: this.attr('src'),
19 //缩放级别
20 zoomLevel: 1,
21 //图片相对于截取框是否居中
22 center: false,
23 //截取框与图片的相对位置
24 left: 0, top: 0,
25 //截取框的大小
26 width: 200, height: 200,
27 //工作区大小
28 cropWorkAreaSize: { width: 600, height: 400 },
29 //截取框相对于工作区的位置
30 cropFrameRect: { center: true, top: 0, left: 0 },
31 //缩放范围
32 zoom: { min: 0, max: 2, step: 0.01 },
33 //回调函数
34 callbacks: {
35 //移动图片后
36 dragging: false,
37 //缩放后
38 zoomed: false
39 }
40 };
41 if (options) {
42 defaults = $.extend(defaults, options);
43 }
44 return new imageCropper(this, defaults);
45 }
46 });
47
48 function imageCropper(image, settings) {
49 this.init(image, settings);
50 };
51
52 imageCropper.prototype = {
53 settings: false,
54 wrapper: $('<div class="image-cropper-wrapper"/>'),
55 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>'),
56 img: false,
57 init: function(image, settings) {
58 var context = this;
59 this.settings = settings;
60 image.addClass('background-img');
61 //生成html
62 image.wrap(this.wrapper).wrap('<div class="crop-work-area"/>').wrap('<div class="crop-background"/>');
63 this.wrapper = $('.image-cropper-wrapper');
64 $('.crop-work-area', this.wrapper).append('<div class="crop-frame"><img class="foreground-img" src="" /></div><div class="drag-containment"/>');
65 this.wrapper.append(this.zoomWrapper);
66
67 $('.image-cropper-wrapper', this.wrapper).disableSelection();
68 this.reset();
69
70 //图片的拖动
71 $('.crop-background', this.wrapper).draggable({
72 containment: $('.drag-containment', this.wrapper),
73 cursor: 'move',
74 drag: function(event, ui) {
75 var self = $(this).data('draggable');
76 //同时移动前景图
77 $('.foreground-img', this.wrapper).css({
78 left: (parseInt(self.position.left) - context.settings.cropFrameRect.left - 1) + 'px',
79 top: (parseInt(self.position.top) - context.settings.cropFrameRect.top - 1) + 'px'
80 });
81 //得到截图左上点坐标
82 context.settings.left = context.settings.cropFrameRect.left - parseInt($(this).css('left'));
83 context.settings.top = context.settings.cropFrameRect.top - parseInt($(this).css('top'));
84 //移动图片的callback
85 context.fireCallback(context.settings.callbacks.dragging);
86 }
87 });
88 $('.foreground-img', this.wrapper).draggable({
89 containment: $('.drag-containment', this.wrapper),
90 cursor: 'move',
91 drag: function(event, ui) {
92 var self = $(this).data('draggable');
93 //同时移动背景
94 $('.crop-background', this.wrapper).css({
95 left: (parseInt(self.position.left) + context.settings.cropFrameRect.left + 1) + 'px',
96 top: (parseInt(self.position.top) + context.settings.cropFrameRect.top + 1) + 'px'
97 });
98 //得到截图左上点坐标
99 context.settings.left = context.settings.cropFrameRect.left - parseInt($('.crop-background', this.wrapper).css('left'));
100 context.settings.top = context.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css('top'));
101 //移动图片的callback
102 context.fireCallback(context.settings.callbacks.dragging);
103 }
104 });
105 //点击缩放
106 $('.zoom-out-button,.zoom-in-button', this.wrapper).click(function() {
107 var step = $(this).hasClass('zoom-in-button') ? context.settings.zoom.step : -context.settings.zoom.step;
108 var tempZoomLevel = context.formatNumber(context.settings.zoomLevel + step, 3);
109 //如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
110 if (context.settings.zoomLevel >= context.settings.zoom.min
111 && context.settings.zoomLevel <= context.settings.zoom.max
112 && parseInt($('.crop-background', this.wrapper).css('left')) + tempZoomLevel * context.img.width > context.settings.cropFrameRect.left + context.settings.width
113 && parseInt($('.crop-background', this.wrapper).css('top')) + tempZoomLevel * context.img.height > context.settings.cropFrameRect.top + context.settings.height
114 ) {
115 context.settings.zoomLevel = tempZoomLevel;
116 context.zoom(context.img.width * context.settings.zoomLevel, context.img.height * context.settings.zoomLevel);
117 $('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom.min) + 'px');
118 }
119 context.fireCallback(context.settings.callbacks.zoomed);
120 });
121 //滚动条缩放
122 var cancelZoomScroll = false;
123 $('.zoom-scroller', this.wrapper).draggable({
124 containment: $('.zoom-scrollbar', this.wrapper),
125 axis: 'x',
126 drag: function(event, ui) {
127 var tempZoomLevel = (context.settings.zoom.max - context.settings.zoom.min) * parseInt($(this).css('left')) / 200;
128 //如果缩放级别超出范围 或者 缩放导致图片右下角没在截取框内 则取消缩放
129 if (parseInt($('.crop-background', this.wrapper).css('left')) + tempZoomLevel * context.img.width > context.settings.cropFrameRect.left + context.settings.width
130 && parseInt($('.crop-background', this.wrapper).css('top')) + tempZoomLevel * context.img.height > context.settings.cropFrameRect.top + context.settings.height
131 ) {
132 context.settings.zoomLevel = tempZoomLevel;
133 context.zoom(context.img.width * context.settings.zoomLevel, context.img.height * context.settings.zoomLevel);
134 cancelZoomScroll = false;
135 context.fireCallback(context.settings.callbacks.zoomed);
136 }
137 else {
138 cancelZoomScroll = true;
139 }
140 },
141 stop: function(event, ui) {
142 //如果缩放级别无效 则重置滚动条的值
143 if (cancelZoomScroll) {
144 $('.zoom-scroller', this.wrapper).css('left', context.settings.zoomLevel * 200 / (context.settings.zoom.max - context.settings.zoom.min) + 'px');
145 }
146 }
147 });
148 },
149 reset: function() {
150 this.img = new Image();
151 this.img.src = this.settings.imagePath;
152 //截取框大于工作区,则放大工作区
153 var tempSize = {
154 width: Math.max(this.settings.cropWorkAreaSize.width, this.settings.width),
155 height: Math.max(this.settings.cropWorkAreaSize.height, this.settings.height)
156 };
157 //如果截取框在工作区中居中,则重新设置截取框的位置
158 if (this.settings.cropFrameRect.center) {
159 this.settings.cropFrameRect.left = (tempSize.width - this.settings.width) / 2;
160 this.settings.cropFrameRect.top = (tempSize.height - this.settings.height) / 2;
161 }
162 //如果截取框在图片中居中,则重新设置图片与截取框的相对位置
163 if (this.settings.center) {
164 this.settings.left = (this.img.width * this.settings.zoomLevel - this.settings.width) / 2;
165 this.settings.top = (this.img.height * this.settings.zoomLevel - this.settings.height) / 2;
166 }
167
168 this.wrapper.width(tempSize.width + 2).height(tempSize.height + 25);
169 $('.foreground-img,.background-img', this.wrapper).attr('src', this.settings.imagePath);
170 $('.crop-work-area', this.wrapper).width(tempSize.width).height(tempSize.height);
171 $('.crop-frame', this.wrapper).css({
172 left: this.settings.cropFrameRect.left + 'px',
173 top: this.settings.cropFrameRect.top + 'px',
174 width: this.settings.width + 'px',
175 height: this.settings.height + 'px'
176 });
177 $('.foreground-img', this.wrapper).css({
178 left: (-this.settings.cropFrameRect.left - 1) + 'px',
179 top: (-this.settings.cropFrameRect.top - 1) + 'px'
180 });
181 $('.zoom-scroller', this.wrapper).css('left', this.settings.zoomLevel * 200 / (this.settings.zoom.max - this.settings.zoom.min) + 'px');
182
183
184 $('.crop-background', this.wrapper).css({
185 opacity: 0.3,
186 left: this.settings.cropFrameRect.left - this.settings.left + 'px',
187 top: this.settings.cropFrameRect.top - this.settings.top + 'px'
188 });
189 $('.foreground-img', this.wrapper).css({
190 left: -this.settings.left + 'px',
191 top: -this.settings.top + 'px'
192 });
193
194 this.settings.left = this.settings.cropFrameRect.left - parseInt($('.crop-background', this.wrapper).css('left'));
195 this.settings.top = this.settings.cropFrameRect.top - parseInt($('.crop-background', this.wrapper).css('top'));
196
197 this.zoom(this.img.width * this.settings.zoomLevel, this.img.height * this.settings.zoomLevel);
198 },
199 zoom: function(width, height) {
200 $('.crop-background, .background-img, .foreground-img', this.wrapper).width(width).height(height);
201 //调整拖动限制框
202 $('.drag-containment', this.wrapper).css({
203 left: this.settings.cropFrameRect.left + this.settings.width - this.settings.zoomLevel * this.img.width + 1 + 'px',
204 top: this.settings.cropFrameRect.top + this.settings.height - this.settings.zoomLevel * this.img.height + 1 + 'px',
205 width: 2 * this.settings.zoomLevel * this.img.width - this.settings.width + 'px',
206 height: 2 * this.settings.zoomLevel * this.img.height - this.settings.height + 'px'
207 });
208 },
209 formatNumber: function(number, bit) {
210 return Math.round(number * Math.pow(10, bit)) / Math.pow(10, bit);
211 },
212 fireCallback: function(fn) {
213 if ($.isFunction(fn)) {
214 fn.call(this);
215 };
216 }
217 };
218 })(jQuery);
219
参考:http://www.cnblogs.com/brightwang/archive/2008/09/10/1288148.html