├── 1.JPG
├── 2.jpg
├── index.css
├── LICENSE
├── README.md
├── index.html
└── ImageCrop.js
/1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/image-components/ImageCrop/HEAD/1.JPG
--------------------------------------------------------------------------------
/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/image-components/ImageCrop/HEAD/2.jpg
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | .w200 {width:200px;}
2 | .h200 {height:200px;}
3 | .w198 {width:198px}
4 | .h198 {height: 198px}
5 | .img {}
6 | .maxImg {max-width:500px;_width:500px;max-height:500px;_height:500px;}
7 | .rel {position:relative;}
8 | .abs {position:absolute;}
9 | .fl {float:left;}
10 | .tc {text-align:center;}
11 | .ma {margin:auto;}
12 | .ml10 {margin-left:10px;}
13 | .origin {user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
14 | .view {top:0;left:0;z-index:5;}
15 | .inb {display:inline-block;vertical-align:middle;}
16 |
17 | .prev {width:150px;height:150px;overflow:hidden;}
18 | .prev1 {width:200px;height:200px;}
19 |
20 | .area {overflow:hidden;}
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 doly mood
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ImageCrop2
2 | ==========
3 |
4 | [DEMO](https://rawgit.com/dolymood/ImageCrop2/master/index.html)
5 |
6 | ImageCrop2 —— 一个轻量级无依赖的图片裁剪、预览组件。
7 |
8 | __针对于手机端特性，模仿 QQ 客户端上传头像的裁切，增加了适用于手机端的图片裁切组件 [ImageCrop4Mobile](https://github.com/dolymood/ImageCrop4Mobile)__
9 |
10 | 配置说明：
11 |
12 | ```js
13 | function $(id) {
14 | return document.getElementById(id)
15 | }
16 | var imgCrop = new ImageCrop({
17 | sourceContainer: $('source'), // 必选，图片所在的容器元素
18 | src: '1.jpg', // 必选，图片地址
19 | imgCls: 'img maxImg', // 可选，图片元素img的classname，默认 img
20 | preImg: $('prevImg'), // 可选，预览图片元素，已存在img元素
21 | areaImg: $('areaImg'), // 可选，当前移动框所包含的图片内容
22 | width: 50, // 可选，默认移动框的宽度，默认 100
23 | height: 50, // 可选，默认移动框的高度，默认 100
24 | lockWHScale: true, // 可选，是否锁定宽高比，默认false
25 | defaultCenter: false, // 可选，是否默认出现在中心位置，默认true
26 | top: 10, // 可选，默认出现位置的top值（当defaultCenter为false时有效），默认0
27 | left:10, // 可选，默认出现位置的left值（当defaultCenter为false时有效），默认0
28 |
29 | minHeight: 10, // 可选，移动框的最小高度，默认20
30 | minWidth: 10, // 可选，移动框的最小宽度，默认20
31 |
32 | minImgWidth: 120, // 可选，预览图片的最小宽度，默认150
33 | minImgHeight: 120, // 可选，预览图片的最小高度，默认150
34 |
35 | // 可选，当移动的时候调用
36 | // 移动的概念是指 选择框的大小、位置 发生改变的时候
37 | onMove: function() {
38 | console.log('preInfo::', this.getPreInfo())
39 | console.log('areaInfo::', this.getAreaInfo())
40 | console.log('originInfo::', this.getOriginInfo())
41 | }
42 | });
43 | ```
44 |
45 | api部分：
46 |
47 | ```js
48 | var info = imgCrop.getPreInfo(); // 预览图片相关信息
49 | var info1 = imgCrop.getAreaInfo(); // 移动框所包含的的图片相关信息
50 | var info2 = imgCrop.getOriginInfo(); // 得到相对于图片原始大小时位置大小信息
51 | // info info1 info2 均为
52 | /*
53 | {
54 | left: 10,
55 | top: 10,
56 | width: 200,
57 | height: 200
58 | }
59 | */
60 | //这种形式.
61 | imgCrop.changeImage('2.jpg'); // 更改图片
62 | ```
63 |
64 | 兼容性：
65 |
66 | _IE6+，其他浏览器_
67 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | index
6 |
7 |
8 |
9 |
10 |
15 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/ImageCrop.js:
--------------------------------------------------------------------------------
1 | ;(function(DOC) {
2 | var w3c = window.dispatchEvent,
3 | // https://github.com/RubyLouvre/avalon/blob/master/avalon.js
4 | fixEvent = function(event) {
5 | var target = event.target = event.srcElement;
6 | event.which = event.charCode != null ? event.charCode : event.keyCode;
7 | if (/mouse|click/.test(event.type)) {
8 | var doc = target.ownerDocument || DOC
9 | var box = doc.compatMode === "BackCompat" ? doc.body : doc.documentElement
10 | event.pageX = event.clientX + (box.scrollLeft >> 0) - (box.clientLeft >> 0)
11 | event.pageY = event.clientY + (box.scrollTop >> 0) - (box.clientTop >> 0)
12 | }
13 | event.preventDefault = function() {
14 | event.returnValue = false
15 | }
16 | event.stopPropagation = function() {
17 | event.cancelBubble = true
18 | }
19 | return event
20 | },
21 | bind = function(ele, name, func, bubble) {
22 | function callback(e) {
23 | var ex = e.target ? e : fixEvent(e || window.event)
24 | var ret = func.call(ele, e)
25 | if (ret === false) {
26 | ex.preventDefault()
27 | ex.stopPropagation()
28 | }
29 | return ret
30 | }
31 | if (w3c) {
32 | ele.addEventListener(name, callback, !!bubble)
33 | } else {
34 | try {
35 | ele.attachEvent("on" + name, callback)
36 | } catch (e) {}
37 | }
38 | return callback;
39 | },
40 | unbind = w3c ? function(ele, name, func, bubble) {
41 | ele.removeEventListener(name, func, !!bubble)
42 | } : function(ele, name, func) {
43 | ele.detachEvent('on' + name, func)
44 | },
45 | // 参照jquery实现
46 | // http://code.jquery.com/jquery-1.10.2.js
47 | offset = function(elem) {
48 | var docElem, win,
49 | box = {top: 0, left: 0},
50 | doc = elem && elem.ownerDocument;
51 | if (!doc) return;
52 | docElem = doc.documentElement;
53 | // If we don't have gBCR, just use 0,0 rather than error
54 | // BlackBerry 5, iOS 3 (original iPhone)
55 | if (typeof elem.getBoundingClientRect !== 'undefined') {
56 | box = elem.getBoundingClientRect();
57 | }
58 | win = doc.nodeType === 9 ? doc.defaultView || doc.parentWindow : false;
59 | return {
60 | top: box.top + (win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0),
61 | left: box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0)
62 | };
63 | };
64 |
65 | var EVENT = {
66 | on: bind,
67 | off: unbind,
68 | stop: function(e) {
69 | e.stopPropagation();
70 | e.preventDefault();
71 | }
72 | };
73 |
74 | if (!bind.bind) {
75 | Function.prototype.bind = function(context) {
76 | var that = this;
77 | var args = Array.prototype.slice.call(arguments, 1);
78 | return function() {
79 | var ars = args.concat();
80 | ars.push.apply(ars, arguments)
81 | return that.apply(context, ars);
82 | };
83 | };
84 | }
85 |
86 | function DragMove(ele, areaMax, Max, options) {
87 | this.ele = ele;
88 | this.mousedDown = false;
89 | this.areaMax = areaMax;
90 | this.Max = Max;
91 | this.initPos = {
92 | left: 0,
93 | top: 0
94 | };
95 | this.initWH = {
96 | w: this.ele.offsetWidth || parseInt(this.ele.style.width),
97 | h: this.ele.offsetHeight || parseInt(this.ele.style.height)
98 | };
99 | this.startPos = {
100 | x: 0,
101 | y: 0
102 | };
103 | this.onMove = options.onMove;
104 | this.onResize = options.onResize;
105 | this.minWidth = options.minWidth || 20;
106 | this.minHeight = options.minHeight || 20;
107 | this.lockWHScale = options.lockWHScale;
108 | this.pTop = this.pLeft = 0;
109 | this.bindEvts();
110 | }
111 | DragMove.prototype = {
112 | constructor: DragMove,
113 |
114 | bindEvts: function() {
115 | this._mousedown = EVENT.on(this.ele, 'mousedown', this.mousedown.bind(this));
116 | },
117 |
118 | mousedown: function(e) {
119 | this._mousemove = EVENT.on(DOC, 'mousemove', this.mousemove.bind(this));
120 | this._mouseup = EVENT.on(DOC, 'mouseup', this.mouseup.bind(this));
121 | EVENT.stop(e);
122 | this.mousedDown = true;
123 | this.target = e.target;
124 | this.startPos.x = e.pageX;
125 | this.startPos.y= e.pageY;
126 | },
127 |
128 | mousemove: function(e) {
129 | EVENT.stop(e);
130 | if (this.mousedDown) {
131 | if (this.target.getAttribute('data-card')) {
132 | this.handlerMove(e);
133 | } else if (this.target.tagName.toLowerCase() === 'i') {
134 | this.handlerResize(e);
135 | }
136 | }
137 | return false;
138 | },
139 |
140 | handlerMove: function(e) {
141 | var x = e.pageX;
142 | var y = e.pageY;
143 | var pLeft = this.initPos.left;
144 | var pTop = this.initPos.top;
145 | pLeft += (x - this.startPos.x);
146 | pTop += (y - this.startPos.y)
147 | if (pLeft > this.areaMax.maxLeft) {
148 | pLeft = this.areaMax.maxLeft;
149 | } else if (pLeft < this.areaMax.minLeft) {
150 | pLeft = this.areaMax.minLeft;
151 | }
152 |
153 | if (pTop > this.areaMax.maxTop) {
154 | pTop = this.areaMax.maxTop;
155 | } else if (pTop < this.areaMax.minTop) {
156 | pTop = this.areaMax.minTop;
157 | }
158 | this.moveTo(pTop, pLeft);
159 | },
160 |
161 | moveTo: function(pTop, pLeft) {
162 | var eleStyle = this.ele.style;
163 | eleStyle.top = pTop + 'px';
164 | eleStyle.left = pLeft + 'px';
165 | this.pTop = pTop;
166 | this.pLeft = pLeft;
167 | this.pW = this.initWH.w;
168 | this.pH = this.initWH.h;
169 | this.onMove(pTop, pLeft);
170 | },
171 |
172 | handlerResize: function(e) {
173 | var x = e.pageX, y = e.pageY,
174 | xy = this.target && this.target.getAttribute('data-xy').split(',') || [1, 1],
175 | X = xy[0] - 0, Y = xy[1] - 0,
176 | diffX = (x - this.startPos.x) * X, diffY = (y - this.startPos.y) * Y,
177 | pW = this.initWH.w, pH = this.initWH.h,
178 | pLeft = this.initPos.left, pTop = this.initPos.top,
179 | disLeft = false, disTop = false, disW = false, disH = false,
180 | eleStyle = this.ele.style, dx, dy;
181 | if (this.lockWHScale) {
182 | dx = Math.abs(diffX), dy = Math.abs(diffY);
183 | if ((Y > 0 || Y < 0) && X === 0) {
184 | diffX = diffY = (diffY >= 0 ? dy : -dy);
185 | } else {
186 | // 目前优先 X
187 | diffX = diffY = (diffX >= 0 ? dx : -dx);
188 | }
189 | }
190 | pW += diffX;
191 | pH += diffY;
192 | if (X < 0) pLeft -= diffX;
193 | if (Y < 0) pTop -= diffY;
194 |
195 | if (pLeft > (this.Max.w - this.minWidth)) {
196 | pW += (pLeft - this.areaMax.maxLeft);
197 | pLeft = this.areaMax.maxLeft;
198 | disLeft = true;
199 | } else if (pLeft < this.areaMax.minLeft) {
200 | pW += (pLeft - this.areaMax.minLeft);
201 | pLeft = this.areaMax.minLeft;
202 | disLeft = true;
203 | }
204 | if (pTop > (this.Max.h - this.minHeight)) {
205 | pH += (pTop - this.areaMax.maxTop);
206 | pTop = this.areaMax.maxTop;
207 | disTop = true;
208 | } else if (pTop < this.areaMax.minTop) {
209 | pH += (pTop - this.areaMax.minTop);
210 | pTop = this.areaMax.minTop;
211 | disTop = true;
212 | }
213 | if (pW + pLeft > this.Max.w) {
214 | pW = this.Max.w - pLeft;
215 | disW = true;
216 | } else if (pW < this.minWidth) {
217 | if (X < 0) {
218 | pLeft += (pW - this.minWidth);
219 | } else {
220 | disW = true;
221 | }
222 | pW = this.minWidth;
223 | }
224 | if (pH + pTop > this.Max.h) {
225 | pH = this.Max.h - pTop;
226 | disH = true;
227 | } else if (pH < this.minHeight) {
228 | if (Y < 0) {
229 | pTop += (pH - this.minHeight);
230 | } else {
231 | disH = true;
232 | }
233 | pH = this.minHeight;
234 | }
235 | if (this.lockWHScale) {
236 | var pw = pW, ph = pH, wp = pW / pH, hp = this.initWH.w / this.initWH.h;
237 | if (wp >= hp) {
238 | pW = pH * hp;
239 | if (X < 0) {
240 | pLeft -= (pW - pw);
241 | }
242 | } else if (wp < hp) {
243 | pH = pW * this.initWH.h / this.initWH.w;
244 | if (Y < 0) {
245 | pTop -= (pH - ph);
246 | }
247 | }
248 | }
249 | if (!disW) {
250 | eleStyle.left = pLeft + 'px';
251 | this.pLeft = pLeft;
252 | }
253 | if (!disH) {
254 | eleStyle.top = pTop + 'px';
255 | this.pTop = pTop;
256 | }
257 | eleStyle.width = pW + 'px';
258 | this.pW = pW;
259 | eleStyle.height = pH + 'px';
260 | this.pH = pH;
261 | if (!disLeft || !disTop) {
262 | this.onResize(this.pW, this.pH);
263 | }
264 | this.onMove(this.pTop, this.pLeft);
265 | },
266 |
267 | mouseup: function(e) {
268 | e && EVENT.stop(e);
269 | this.mousedDown = false;
270 | this.startPos.x = 0;
271 | this.startPos.y= 0;
272 | this.initWH.w = this.pW;
273 | this.initWH.h = this.pH;
274 | this.initPos.left = this.pLeft;
275 | this.initPos.top = this.pTop;
276 | this._mousemove && EVENT.off(DOC, 'mousemove', this._mousemove);
277 | this._mouseup && EVENT.off(DOC, 'mouseup', this._mouseup);
278 | this._mousemove = null;
279 | this._mouseup = null;
280 | },
281 |
282 | destroy: function() {
283 | EVENT.off(this.ele, 'mousedown', this._mousedown);
284 | this.ele = null;
285 | }
286 | }
287 |
288 | window.ImageCrop = ImageCrop;
289 | function ImageCrop(options) {
290 | this.sourceContainer = options.sourceContainer;
291 | this.sourceContainer.style.position = 'relative';
292 | initStyles.call(this, options);
293 | this.options = options;
294 | if (!this.options.minHeight) {this.options.minHeight = 20}
295 | if (!this.options.minWidth) {this.options.minWidth = 20}
296 | if (!this.options.minImgHeight) {this.options.minImgHeight = 150}
297 | if (!this.options.minImgWidth) {this.options.minImgWidth = 150}
298 | if (typeof this.options.defaultCenter == 'undefined') this.options.defaultCenter = true;
299 | this.initImage();
300 | }
301 |
302 | function initStyles(options) {
303 | if (options.preImg) iStyle.call(this, 'preImg', options);
304 | if (options.areaImg) iStyle.call(this, 'areaImg', options)
305 | }
306 |
307 | function iStyle(c, options) {
308 | var cstyle = (this[c + 'Container'] = options[c].parentElement).style;
309 | cstyle.position = 'relative';
310 | cstyle.overflow = 'hidden';
311 | this[c] = options[c];
312 | this[c].style.position = 'absolute';
313 | }
314 |
315 | ImageCrop.prototype = {
316 |
317 | constructor: ImageCrop,
318 |
319 | initImage: function() {
320 | var that = this;
321 | try {
322 | if (this.sourceImg) {
323 | this.sourceContainer.removeChild(this.sourceImg);
324 | }
325 | if (this.card) {
326 | this.sourceContainer.removeChild(this.card);
327 | }
328 | } catch (e) {}
329 | this.card = getCard(this.options);
330 | this.scale = {w: 1, h: 1};
331 | this.sourceImg = new Image();
332 | this.sourceImg.onload = function() {
333 | that.originWidth = that.sourceImg.width;
334 | that.originHeight = that.sourceImg.height;
335 | that.sourceImg.className = that.options.imgCls || 'img';
336 | that.sourceContainer.appendChild(that.sourceImg);
337 | setTimeout(function() {
338 | that.init()
339 | })
340 | }
341 | this.sourceImg.src = this.options.src;
342 | this.preImg && (this.preImg.src = this.options.src);
343 | this.areaImg && (this.areaImg.src = this.options.src);
344 | },
345 |
346 | changeImage: function(src) {
347 | this.options.src = src;
348 | this.initImage();
349 | },
350 |
351 | checkImg: function() {
352 | // 在ie下 width值是图片默认图片大小
353 | // 所以这里使用offsetWidth 而不是img.width
354 | var cw = this.sourceImg.offsetWidth;
355 | var ch = this.sourceImg.offsetHeight;
356 | var _cw = cw, _ch = ch;
357 | if (cw < this.options.minImgWidth) {
358 | // 此时图片宽度比较小
359 | _ch = Math.round(this.options.minImgWidth / cw * ch);
360 | _cw = this.options.minImgWidth;
361 | }
362 | if (_ch < this.options.minImgHeight) {
363 | // 此时图片高度比较小
364 | _cw = Math.round(this.options.minImgHeight / _ch * _cw);
365 | _ch = this.options.minImgHeight;
366 | }
367 | this.sourceImg.style.width = this.sourceContainer.style.width = _cw + 'px';
368 | this.sourceImg.style.height = this.sourceContainer.style.height = _ch + 'px';
369 | // 再次check
370 | var _cw_ = this.sourceImg.offsetWidth;
371 | var _ch_ = this.sourceImg.offsetHeight;
372 | if (_cw_ < _cw) {
373 | cw = _cw = _cw_;
374 | _ch = ch;
375 | this.sourceContainer.style.width = cw + 'px';
376 | this.sourceImg.style.height = _ch + 'px';
377 | }
378 | if (_ch_ < _ch) {
379 | ch = _ch = _ch_;
380 | _cw = cw;
381 | this.sourceContainer.style.height = ch + 'px';
382 | this.sourceImg.style.width = _cw + 'px';
383 | }
384 | this.cw = _cw;
385 | this.ch = _ch;
386 | },
387 |
388 | init: function() {
389 | this.options.onInit && this.options.onInit.call(this);
390 | this.checkImg();
391 | this.cardMax = {
392 | minTop: 0,
393 | minLeft: 0,
394 | maxTop: this.ch - this.options.height,
395 | maxLeft: this.cw - this.options.width
396 | };
397 | var mt = this.cardMax.maxTop,
398 | ml = this.cardMax.maxLeft,
399 | offs = offset(this.sourceImg),
400 | dS = {pageX: 0, pageY: 0};
401 | if (mt < 0) this.cardMax.maxTop = 0;
402 | if (ml < 0) this.cardMax.maxLeft = 0;
403 | this.bindEvts();
404 | if (mt < 0 || ml < 0) {
405 | dS.pageX = (offs.left + this.cw) * 2;
406 | dS.pageY = (offs.top + this.ch) * 2;
407 | }
408 | this.dragMove.initPos.left = this.options.left;
409 | this.dragMove.initPos.top = this.options.top;
410 | this.dragMove.handlerResize(dS);
411 | this.sourceContainer.appendChild(this.card);
412 | if (this.options.defaultCenter) {
413 | // 是否默认显示在中心
414 | this.dragMove.moveTo(this.ch / 2 - this.dragMove.pH / 2, this.cw / 2 - this.dragMove.pW / 2);
415 | }
416 | this.dragMove.mouseup();
417 | },
418 |
419 | bindEvts: function() {
420 | if (this.dragMove) {
421 | this.dragMove.destroy();
422 | }
423 | this.dragMove = new DragMove(this.card, this.cardMax, {
424 | w: this.cw,
425 | h: this.ch
426 | }, {
427 | minWidth: this.options.minWidth,
428 | minHeight: this.options.minHeight,
429 | onMove: this.onMove.bind(this),
430 | onResize: this.onResize.bind(this),
431 | lockWHScale: this.options.lockWHScale
432 | });
433 | },
434 |
435 | onMove: function(top, left) {
436 | if (this.preImg) {
437 | var style = this.preImg.style;
438 | style.top = Math.round((-top / this.scale.h), 10) + 'px';
439 | style.left = Math.round((-left / this.scale.w), 10) + 'px';
440 | }
441 | if (this.areaImg) {
442 | style = this.areaImg.style;
443 | style.top = Math.round(-top) + 'px';
444 | style.left = Math.round(-left) + 'px';
445 | }
446 | if (this.options.onMove) this.options.onMove.call(this, top, left, this.dragMove.pH, this.dragMove.pW);
447 | },
448 |
449 | onResize: function(w, h) {
450 | this.cardMax.maxTop = this.ch - this.dragMove.pH;
451 | this.cardMax.maxLeft = this.cw - this.dragMove.pW;
452 | this.computeScale(w, h);
453 | },
454 |
455 | computeScale: function(w, h) {
456 | if (this.preImgContainer) {
457 | this.scale.w = w / this.preImgContainer.offsetWidth;
458 | this.scale.h = h / this.preImgContainer.offsetHeight;
459 | }
460 | this.resize(w, h)
461 | },
462 |
463 | resize: function(w, h) {
464 | if (this.preImg) {
465 | this.preImg.width = Math.round(this.cw / this.scale.w);
466 | this.preImg.height = Math.round(this.ch / this.scale.h);
467 | }
468 | if (this.areaImg) {
469 | this.areaImg.width = this.cw;
470 | this.areaImg.height = this.ch;
471 |
472 | var style = this.areaImgContainer.style;
473 | style.width = w + 'px';
474 | style.height = h + 'px';
475 | }
476 | },
477 |
478 | /*
479 | * 得到当前裁剪位置
480 | */
481 | getPreInfo: function() {
482 | if (this.preImg) {
483 | return {
484 | top: -parseInt(this.preImg.style.top),
485 | left: -parseInt(this.preImg.style.left),
486 | width: this.preImg.width,
487 | height: this.preImg.height
488 | }
489 | }
490 | return {}
491 | },
492 |
493 | /*
494 | * 得到裁剪区域位置
495 | */
496 | getAreaInfo: function() {
497 | if (!this.dragMove) return {};
498 | return {
499 | top: this.dragMove.pTop,
500 | left: this.dragMove.pLeft,
501 | width: this.dragMove.pW,
502 | height: this.dragMove.pH
503 | }
504 | },
505 |
506 | /*
507 | * 得到相对于图片原始大小时位置
508 | */
509 | getOriginInfo: function() {
510 | if (!this.dragMove) return {};
511 | var scaleX = this.originWidth / this.cw, scaleY = this.originHeight / this.ch;
512 | return {
513 | top: Math.round(this.dragMove.pTop * scaleY),
514 | left: Math.round(this.dragMove.pLeft * scaleX),
515 | width: Math.round(this.dragMove.pW * scaleX),
516 | height: Math.round(this.dragMove.pH * scaleY)
517 | }
518 | }
519 | }
520 |
521 | function getCard(options) {
522 | var div = document.createElement('div');
523 | div.setAttribute('data-card', true);
524 | options.top || (options.top = 0);
525 | options.left || (options.left = 0);
526 | options.width || (options.width = 100);
527 | options.height || (options.height = 100);
528 | div.style.cssText = 'position:absolute;top:' + options.top + 'px;left:' + options.left +
529 | 'px;cursor:move;box-sizing:border-box;border:1px dashed #fff;opacity:.5;filter:alpha(opacity=50);background-color:#000;' +
530 | 'z-index:5;width:' + options.width + 'px;height:' + options.height + 'px;';
531 | div.innerHTML = createBs();
532 | return div;
533 | }
534 |
535 | function createBs() {
536 | return (
537 | '' +
538 | '' +
539 | '' +
540 | '' +
541 | '' +
542 | '' +
543 | '' +
544 | '' +
545 |
546 | '' +
547 | '' +
548 | '' +
549 | ''
550 | );
551 | }
552 |
553 | if (typeof module === 'object' && module && typeof module.exports === 'object') {
554 | module.exports = ImageCrop;
555 | } else {
556 | if (typeof define === 'function' && define.amd) {
557 | define([], function() { return ImageCrop; });
558 | }
559 | }
560 | })(document);
561 |
--------------------------------------------------------------------------------