Roo/dialog/UploadCropbox.js
[roojs1] / Roo / dialog / UploadCropbox.js
1
2 /*
3 * Licence: LGPL
4 */
5
6 /**
7  * @class Roo.dialog.UploadCropbox
8  * @extends Roo.BoxComponent
9  * Dialog UploadCropbox class
10  * @cfg {String} emptyText show when image has been loaded
11  * @cfg {String} rotateNotify show when image too small to rotate
12  * @cfg {Number} errorTimeout default 3000
13  * @cfg {Number} minWidth default 300
14  * @cfg {Number} minHeight default 300
15  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
16  * @cfg {Boolean} isDocument (true|false) default false
17  * @cfg {String} url action url
18  * @cfg {String} paramName default 'imageUpload'
19  * @cfg {String} method default POST
20  * @cfg {Boolean} loadMask (true|false) default true
21  * @cfg {Boolean} loadingText default 'Loading...'
22  * 
23  * @constructor
24  * Create a new UploadCropbox
25  * @param {Object} config The config object
26  */
27
28  Roo.dialog.UploadCropbox = function(config){
29     Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
30     
31     this.addEvents({
32         /**
33          * @event beforeselectfile
34          * Fire before select file
35          * @param {Roo.dialog.UploadCropbox} this
36          */
37         "beforeselectfile" : true,
38         /**
39          * @event initial
40          * Fire after initEvent
41          * @param {Roo.dialog.UploadCropbox} this
42          */
43         "initial" : true,
44         /**
45          * @event crop
46          * Fire after initEvent
47          * @param {Roo.dialog.UploadCropbox} this
48          * @param {String} data
49          */
50         "crop" : true,
51         /**
52          * @event prepare
53          * Fire when preparing the file data
54          * @param {Roo.dialog.UploadCropbox} this
55          * @param {Object} file
56          */
57         "prepare" : true,
58         /**
59          * @event exception
60          * Fire when get exception
61          * @param {Roo.dialog.UploadCropbox} this
62          * @param {XMLHttpRequest} xhr
63          */
64         "exception" : true,
65         /**
66          * @event beforeloadcanvas
67          * Fire before load the canvas
68          * @param {Roo.dialog.UploadCropbox} this
69          * @param {String} src
70          */
71         "beforeloadcanvas" : true,
72         /**
73          * @event trash
74          * Fire when trash image
75          * @param {Roo.dialog.UploadCropbox} this
76          */
77         "trash" : true,
78         /**
79          * @event download
80          * Fire when download the image
81          * @param {Roo.dialog.UploadCropbox} this
82          */
83         "download" : true,
84         /**
85          * @event footerbuttonclick
86          * Fire when footerbuttonclick
87          * @param {Roo.dialog.UploadCropbox} this
88          * @param {String} type
89          */
90         "footerbuttonclick" : true,
91         /**
92          * @event resize
93          * Fire when resize
94          * @param {Roo.dialog.UploadCropbox} this
95          */
96         "resize" : true,
97         /**
98          * @event rotate
99          * Fire when rotate the image
100          * @param {Roo.dialog.UploadCropbox} this
101          * @param {String} pos
102          */
103         "rotate" : true,
104         /**
105          * @event inspect
106          * Fire when inspect the file
107          * @param {Roo.dialog.UploadCropbox} this
108          * @param {Object} file
109          */
110         "inspect" : true,
111         /**
112          * @event upload
113          * Fire when xhr upload the file
114          * @param {Roo.dialog.UploadCropbox} this
115          * @param {Object} data
116          */
117         "upload" : true,
118         /**
119          * @event arrange
120          * Fire when arrange the file data
121          * @param {Roo.dialog.UploadCropbox} this
122          * @param {Object} formData
123          */
124         "arrange" : true,
125         /**
126          * @event loadcanvas
127          * Fire after load the canvas
128          * @param {Roo.dialog.UploadCropbox}
129          * @param {Object} imgEl
130          */
131         "loadcanvas" : true
132     });
133     
134     this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
135 };
136
137 Roo.extend(Roo.dialog.UploadCropbox, Roo.Component,  {
138     
139     emptyText : 'Click to upload image',
140     rotateNotify : 'Image is too small to rotate',
141     errorTimeout : 3000,
142     scale : 0,
143     baseScale : 1,
144     rotate : 0,
145     dragable : false,
146     pinching : false,
147     mouseX : 0,
148     mouseY : 0,
149     cropData : false,
150     minWidth : 300,
151     minHeight : 300,
152     file : false,
153     exif : {},
154     baseRotate : 1,
155     cropType : 'image/jpeg',
156     buttons : false,
157     canvasLoaded : false,
158     isDocument : false,
159     method : 'POST',
160     paramName : 'imageUpload',
161     loadMask : true,
162     loadingText : 'Loading...',
163     maskEl : false,
164     
165     getAutoCreate : function()
166     {
167         var cfg = {
168             tag : 'div',
169             cls : 'roo-upload-cropbox',
170             cn : [
171                 {
172                     tag : 'input',
173                     cls : 'roo-upload-cropbox-selector',
174                     type : 'file'
175                 },
176                 {
177                     tag : 'div',
178                     cls : 'roo-upload-cropbox-body',
179                     style : 'cursor:pointer',
180                     cn : [
181                         {
182                             tag : 'div',
183                             cls : 'roo-upload-cropbox-preview'
184                         },
185                         {
186                             tag : 'div',
187                             cls : 'roo-upload-cropbox-thumb'
188                         },
189                         {
190                             tag : 'div',
191                             cls : 'roo-upload-cropbox-empty-notify',
192                             html : this.emptyText
193                         },
194                         {
195                             tag : 'div',
196                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
197                             html : this.rotateNotify
198                         }
199                     ]
200                 },
201                 {
202                     tag : 'div',
203                     cls : 'roo-upload-cropbox-footer',
204                     cn : {
205                         tag : 'div',
206                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
207                         cn : []
208                     }
209                 }
210             ]
211         };
212         
213         return cfg;
214     },
215     
216     onRender : function(ct, position)
217     {
218         Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
219
220         if(this.el){
221             if (this.el.attr('xtype')) {
222                 this.el.attr('xtypex', this.el.attr('xtype'));
223                 this.el.dom.removeAttribute('xtype');
224                 
225                 this.initEvents();
226             }
227         }
228         else {
229             var cfg = Roo.apply({},  this.getAutoCreate());
230         
231             cfg.id = this.id || Roo.id();
232             
233             if (this.cls) {
234                 cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
235             }
236             
237             if (this.style) { // fixme needs to support more complex style data.
238                 cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
239             }
240             
241             this.el = ct.createChild(cfg, position);
242             
243             this.initEvents();
244         }
245         
246         if (this.buttons.length) {
247             
248             Roo.each(this.buttons, function(bb) {
249                 
250                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
251                 
252                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
253                 
254             }, this);
255         }
256         
257         if(this.loadMask){
258             this.maskEl = this.el;
259         }
260     },
261     
262     initEvents : function()
263     {
264         this.urlAPI = (window.createObjectURL && window) || 
265                                 (window.URL && URL.revokeObjectURL && URL) || 
266                                 (window.webkitURL && webkitURL);
267                         
268         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
269         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
270         
271         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
272         this.selectorEl.hide();
273         
274         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
275         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
276         
277         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
278         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
279         this.thumbEl.hide();
280         
281         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
282         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
283         
284         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
285         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
286         this.errorEl.hide();
287         
288         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
289         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
290         this.footerEl.hide();
291         
292         this.setThumbBoxSize();
293         
294         this.bind();
295         
296         this.resize();
297         
298         this.fireEvent('initial', this);
299     },
300
301     bind : function()
302     {
303         var _this = this;
304         
305         window.addEventListener("resize", function() { _this.resize(); } );
306         
307         this.bodyEl.on('click', this.beforeSelectFile, this);
308         
309         if(Roo.isTouch){
310             this.bodyEl.on('touchstart', this.onTouchStart, this);
311             this.bodyEl.on('touchmove', this.onTouchMove, this);
312             this.bodyEl.on('touchend', this.onTouchEnd, this);
313         }
314         
315         if(!Roo.isTouch){
316             this.bodyEl.on('mousedown', this.onMouseDown, this);
317             this.bodyEl.on('mousemove', this.onMouseMove, this);
318             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
319             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
320             Roo.get(document).on('mouseup', this.onMouseUp, this);
321         }
322         
323         this.selectorEl.on('change', this.onFileSelected, this);
324     },
325     
326     reset : function()
327     {    
328         this.scale = 0;
329         this.baseScale = 1;
330         this.rotate = 0;
331         this.baseRotate = 1;
332         this.dragable = false;
333         this.pinching = false;
334         this.mouseX = 0;
335         this.mouseY = 0;
336         this.cropData = false;
337         this.notifyEl.dom.innerHTML = this.emptyText;
338         
339         // this.selectorEl.dom.value = '';
340         
341     },
342     
343     resize : function()
344     {
345         if(this.fireEvent('resize', this) != false){
346             this.setThumbBoxPosition();
347             this.setCanvasPosition();
348         }
349     },
350     
351     onFooterButtonClick : function(e, el, o, type)
352     {
353         switch (type) {
354             case 'rotate-left' :
355                 this.onRotateLeft(e);
356                 break;
357             case 'rotate-right' :
358                 this.onRotateRight(e);
359                 break;
360             case 'picture' :
361                 this.beforeSelectFile(e);
362                 break;
363             case 'trash' :
364                 this.trash(e);
365                 break;
366             case 'crop' :
367                 this.crop(e);
368                 break;
369             case 'download' :
370                 this.download(e);
371                 break;
372             default :
373                 break;
374         }
375         
376         this.fireEvent('footerbuttonclick', this, type);
377     },
378     
379     beforeSelectFile : function(e)
380     {
381         e.preventDefault();
382         
383         if(this.fireEvent('beforeselectfile', this) != false){
384             this.selectorEl.dom.click();
385         }
386     },
387     
388     onFileSelected : function(e)
389     {
390         console.log("ON FILE SELECTED");
391         e.preventDefault();
392         
393         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
394             return;
395         }
396         
397         var file = this.selectorEl.dom.files[0];
398         
399         if(this.fireEvent('inspect', this, file) != false){
400             this.prepare(file);
401         }
402         
403     },
404     
405     trash : function(e)
406     {
407         this.fireEvent('trash', this);
408     },
409     
410     download : function(e)
411     {
412         this.fireEvent('download', this);
413     },
414     
415     loadCanvas : function(src)
416     {   
417         console.log("LOAD CANVAS");
418         console.log(src);
419         if(this.fireEvent('beforeloadcanvas', this, src) != false){
420             
421             this.reset();
422             
423             this.imageEl = document.createElement('img');
424             
425             var _this = this;
426             
427             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
428             
429             this.imageEl.src = src;
430         }
431     },
432     
433     onLoadCanvas : function()
434     {   
435         console.log("ON LOAD CANVAS");
436         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
437         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
438
439         if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
440         
441             this.bodyEl.un('click', this.beforeSelectFile, this);
442             
443             this.notifyEl.hide();
444             this.thumbEl.show();
445             this.footerEl.show();
446             
447             this.baseRotateLevel();
448             
449             if(this.isDocument){
450                 this.setThumbBoxSize();
451             }
452             
453             this.setThumbBoxPosition();
454             
455             this.baseScaleLevel();
456             
457             this.draw();
458             
459             this.resize();
460             
461             this.canvasLoaded = true;
462         
463         }
464         
465         if(this.loadMask){
466             this.maskEl.unmask();
467         }
468         
469     },
470     
471     setCanvasPosition : function()
472     {   
473         console.log("SET CANVAS POSITION");
474         if(!this.canvasEl){
475             return;
476         }
477         
478         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
479         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
480         
481         this.previewEl.setLeft(pw);
482         this.previewEl.setTop(ph);
483         
484     },
485     
486     onMouseDown : function(e)
487     {   
488         e.stopEvent();
489         
490         this.dragable = true;
491         this.pinching = false;
492         
493         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
494             this.dragable = false;
495             return;
496         }
497         
498         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
499         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
500         
501     },
502     
503     onMouseMove : function(e)
504     {   
505         e.stopEvent();
506         
507         if(!this.canvasLoaded){
508             return;
509         }
510         
511         if (!this.dragable){
512             return;
513         }
514         
515         var minX = Math.ceil(this.thumbEl.getLeft(true));
516         var minY = Math.ceil(this.thumbEl.getTop(true));
517         
518         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
519         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
520         
521         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
522         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
523         
524         x = x - this.mouseX;
525         y = y - this.mouseY;
526         
527         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
528         var bgY = Math.ceil(y + this.previewEl.getTop(true));
529         
530         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
531         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
532         
533         this.previewEl.setLeft(bgX);
534         this.previewEl.setTop(bgY);
535         
536         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
537         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
538     },
539     
540     onMouseUp : function(e)
541     {   
542         e.stopEvent();
543         
544         this.dragable = false;
545     },
546     
547     onMouseWheel : function(e)
548     {   
549         e.stopEvent();
550         
551         this.startScale = this.scale;
552         this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
553         if(!this.zoomable()){
554             this.scale = this.startScale;
555             return;
556         }
557         
558         this.draw();
559         
560         return;
561     },
562     
563     zoomable : function()
564     {
565         var minScale = this.thumbEl.getWidth() / this.minWidth;
566         
567         if(this.minWidth < this.minHeight){
568             minScale = this.thumbEl.getHeight() / this.minHeight;
569         }
570         
571         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
572         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
573
574         var maxWidth = this.imageEl.OriginWidth;
575         var maxHeight = this.imageEl.OriginHeight;
576         
577         if(
578                 this.isDocument &&
579                 (this.rotate == 0 || this.rotate == 180) && 
580                 (
581                     width > this.imageEl.OriginWidth || 
582                     height > this.imageEl.OriginHeight ||
583                     (width < this.minWidth && height < this.minHeight)
584                 )
585         ){
586             return false;
587         }
588         
589         if(
590                 this.isDocument &&
591                 (this.rotate == 90 || this.rotate == 270) && 
592                 (
593                     width > this.imageEl.OriginWidth || 
594                     height > this.imageEl.OriginHeight ||
595                     (width < this.minHeight && height < this.minWidth)
596                 )
597         ){
598             return false;
599         }
600         
601         if(
602                 !this.isDocument &&
603                 (this.rotate == 0 || this.rotate == 180) && 
604                 (
605                     width < this.minWidth ||
606                     height < this.minHeight ||
607                     width > maxWidth ||
608                     height > maxHeight
609                 )
610         ){
611             return false;
612         }
613         
614         if(
615                 !this.isDocument &&
616                 (this.rotate == 90 || this.rotate == 270) && 
617                 (
618                     width < this.minHeight || 
619                     width > this.imageEl.OriginWidth || 
620                     height < this.minWidth || 
621                     height > this.imageEl.OriginHeight
622                 )
623         ){
624             return false;
625         }
626         
627         return true;
628         
629     },
630     
631     onRotateLeft : function(e)
632     {   
633         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
634             
635             var minScale = this.thumbEl.getWidth() / this.minWidth;
636             
637             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
638             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
639             
640             this.startScale = this.scale;
641             
642             while (this.getScaleLevel() < minScale){
643             
644                 this.scale = this.scale + 1;
645                 
646                 if(!this.zoomable()){
647                     break;
648                 }
649                 
650                 if(
651                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
652                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
653                 ){
654                     continue;
655                 }
656                 
657                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
658
659                 this.draw();
660                 
661                 return;
662             }
663             
664             this.scale = this.startScale;
665             
666             this.onRotateFail();
667             
668             return false;
669         }
670         
671         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
672
673         if(this.isDocument){
674             this.setThumbBoxSize();
675             this.setThumbBoxPosition();
676             this.setCanvasPosition();
677         }
678         
679         this.draw();
680         
681         this.fireEvent('rotate', this, 'left');
682         
683     },
684     
685     onRotateRight : function(e)
686     {
687         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
688             
689             var minScale = this.thumbEl.getWidth() / this.minWidth;
690         
691             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
692             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
693             
694             this.startScale = this.scale;
695             
696             while (this.getScaleLevel() < minScale){
697             
698                 this.scale = this.scale + 1;
699                 
700                 if(!this.zoomable()){
701                     break;
702                 }
703                 
704                 if(
705                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
706                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
707                 ){
708                     continue;
709                 }
710                 
711                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
712
713                 this.draw();
714                 
715                 return;
716             }
717             
718             this.scale = this.startScale;
719             
720             this.onRotateFail();
721             
722             return false;
723         }
724         
725         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
726
727         if(this.isDocument){
728             this.setThumbBoxSize();
729             this.setThumbBoxPosition();
730             this.setCanvasPosition();
731         }
732         
733         this.draw();
734         
735         this.fireEvent('rotate', this, 'right');
736     },
737     
738     onRotateFail : function()
739     {
740         this.errorEl.show(true);
741         
742         var _this = this;
743         
744         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
745     },
746     
747     draw : function()
748     {
749         console.log("DRAW");
750         this.previewEl.dom.innerHTML = '';
751         
752         var canvasEl = document.createElement("canvas");
753         
754         var contextEl = canvasEl.getContext("2d");
755
756         console.log(this.getScaleLevel());
757         
758         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
759         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
760         var center = this.imageEl.OriginWidth / 2;
761         
762         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
763             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
764             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
765             center = this.imageEl.OriginHeight / 2;
766         }
767         
768         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
769         
770         contextEl.translate(center, center);
771         contextEl.rotate(this.rotate * Math.PI / 180);
772
773         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
774         
775         this.canvasEl = document.createElement("canvas");
776         
777         this.contextEl = this.canvasEl.getContext("2d");
778         
779         switch (this.rotate) {
780             case 0 :
781                 
782                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
783                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
784                 
785                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
786                 
787                 break;
788             case 90 : 
789                 
790                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
791                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
792                 
793                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
794                     this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
795                     break;
796                 }
797                 
798                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
799                 
800                 break;
801             case 180 :
802                 
803                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
804                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
805                 
806                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
807                     this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
808                     break;
809                 }
810                 
811                 this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
812                 
813                 break;
814             case 270 :
815                 
816                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
817                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
818         
819                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
820                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
821                     break;
822                 }
823                 
824                 this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
825                 
826                 break;
827             default : 
828                 break;
829         }
830         
831         this.previewEl.appendChild(this.canvasEl);
832         
833         this.setCanvasPosition();
834     },
835     
836     crop : function()
837     {
838         if(!this.canvasLoaded){
839             return;
840         }
841         
842         var imageCanvas = document.createElement("canvas");
843         
844         var imageContext = imageCanvas.getContext("2d");
845         
846         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
847         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
848         
849         var center = imageCanvas.width / 2;
850         
851         imageContext.translate(center, center);
852         
853         imageContext.rotate(this.rotate * Math.PI / 180);
854         
855         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
856         
857         var canvas = document.createElement("canvas");
858         
859         var context = canvas.getContext("2d");
860                 
861         canvas.width = this.minWidth;
862         canvas.height = this.minHeight;
863
864         switch (this.rotate) {
865             case 0 :
866                 
867                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
868                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
869                 
870                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
871                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
872                 
873                 var targetWidth = this.minWidth - 2 * x;
874                 var targetHeight = this.minHeight - 2 * y;
875                 
876                 var scale = 1;
877                 
878                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
879                     scale = targetWidth / width;
880                 }
881                 
882                 if(x > 0 && y == 0){
883                     scale = targetHeight / height;
884                 }
885                 
886                 if(x > 0 && y > 0){
887                     scale = targetWidth / width;
888                     
889                     if(width < height){
890                         scale = targetHeight / height;
891                     }
892                 }
893                 
894                 context.scale(scale, scale);
895                 
896                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
897                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
898
899                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
900                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
901
902                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
903                 
904                 break;
905             case 90 : 
906                 
907                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
908                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
909                 
910                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
911                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
912                 
913                 var targetWidth = this.minWidth - 2 * x;
914                 var targetHeight = this.minHeight - 2 * y;
915                 
916                 var scale = 1;
917                 
918                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
919                     scale = targetWidth / width;
920                 }
921                 
922                 if(x > 0 && y == 0){
923                     scale = targetHeight / height;
924                 }
925                 
926                 if(x > 0 && y > 0){
927                     scale = targetWidth / width;
928                     
929                     if(width < height){
930                         scale = targetHeight / height;
931                     }
932                 }
933                 
934                 context.scale(scale, scale);
935                 
936                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
937                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
938
939                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
940                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
941                 
942                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
943                 
944                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
945                 
946                 break;
947             case 180 :
948                 
949                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
950                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
951                 
952                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
953                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
954                 
955                 var targetWidth = this.minWidth - 2 * x;
956                 var targetHeight = this.minHeight - 2 * y;
957                 
958                 var scale = 1;
959                 
960                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
961                     scale = targetWidth / width;
962                 }
963                 
964                 if(x > 0 && y == 0){
965                     scale = targetHeight / height;
966                 }
967                 
968                 if(x > 0 && y > 0){
969                     scale = targetWidth / width;
970                     
971                     if(width < height){
972                         scale = targetHeight / height;
973                     }
974                 }
975                 
976                 context.scale(scale, scale);
977                 
978                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
979                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
980
981                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
982                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
983
984                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
985                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
986                 
987                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
988                 
989                 break;
990             case 270 :
991                 
992                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
993                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
994                 
995                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
996                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
997                 
998                 var targetWidth = this.minWidth - 2 * x;
999                 var targetHeight = this.minHeight - 2 * y;
1000                 
1001                 var scale = 1;
1002                 
1003                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
1004                     scale = targetWidth / width;
1005                 }
1006                 
1007                 if(x > 0 && y == 0){
1008                     scale = targetHeight / height;
1009                 }
1010                 
1011                 if(x > 0 && y > 0){
1012                     scale = targetWidth / width;
1013                     
1014                     if(width < height){
1015                         scale = targetHeight / height;
1016                     }
1017                 }
1018                 
1019                 context.scale(scale, scale);
1020                 
1021                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
1022                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
1023
1024                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
1025                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
1026                 
1027                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
1028                 
1029                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
1030                 
1031                 break;
1032             default : 
1033                 break;
1034         }
1035         
1036         this.cropData = canvas.toDataURL(this.cropType);
1037         
1038         if(this.fireEvent('crop', this, this.cropData) !== false){
1039             this.process(this.file, this.cropData);
1040         }
1041         
1042         return;
1043         
1044     },
1045     
1046     setThumbBoxSize : function()
1047     {
1048         var width, height;
1049         
1050         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
1051             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
1052             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
1053             
1054             this.minWidth = width;
1055             this.minHeight = height;
1056             
1057             if(this.rotate == 90 || this.rotate == 270){
1058                 this.minWidth = height;
1059                 this.minHeight = width;
1060             }
1061         }
1062         
1063         height = 300;
1064         width = Math.ceil(this.minWidth * height / this.minHeight);
1065         
1066         if(this.minWidth > this.minHeight){
1067             width = 300;
1068             height = Math.ceil(this.minHeight * width / this.minWidth);
1069         }
1070         
1071         this.thumbEl.setStyle({
1072             width : width + 'px',
1073             height : height + 'px'
1074         });
1075
1076         return;
1077             
1078     },
1079     
1080     setThumbBoxPosition : function()
1081     {
1082         console.log("SET THUMBBOX POSITION");
1083         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
1084         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
1085         
1086         this.thumbEl.setLeft(x);
1087         this.thumbEl.setTop(y);
1088         
1089     },
1090     
1091     baseRotateLevel : function()
1092     {
1093         console.log("BASE ROTATE LEVEL");
1094         this.baseRotate = 1;
1095         
1096         if(
1097                 typeof(this.exif) != 'undefined' &&
1098                 typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
1099                 [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
1100         ){
1101             this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
1102         }
1103         
1104         this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
1105         
1106     },
1107     
1108     baseScaleLevel : function()
1109     {
1110         console.log("BASE SCALE LEVEL");
1111         var width, height;
1112         
1113         if(this.isDocument){
1114             
1115             if(this.baseRotate == 6 || this.baseRotate == 8){
1116             
1117                 height = this.thumbEl.getHeight();
1118                 this.baseScale = height / this.imageEl.OriginWidth;
1119
1120                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
1121                     width = this.thumbEl.getWidth();
1122                     this.baseScale = width / this.imageEl.OriginHeight;
1123                 }
1124
1125                 return;
1126             }
1127
1128             height = this.thumbEl.getHeight();
1129             this.baseScale = height / this.imageEl.OriginHeight;
1130
1131             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
1132                 width = this.thumbEl.getWidth();
1133                 this.baseScale = width / this.imageEl.OriginWidth;
1134             }
1135
1136             return;
1137         }
1138         
1139         if(this.baseRotate == 6 || this.baseRotate == 8){
1140             
1141             width = this.thumbEl.getHeight();
1142             this.baseScale = width / this.imageEl.OriginHeight;
1143             
1144             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
1145                 height = this.thumbEl.getWidth();
1146                 this.baseScale = height / this.imageEl.OriginHeight;
1147             }
1148             
1149             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
1150                 height = this.thumbEl.getWidth();
1151                 this.baseScale = height / this.imageEl.OriginHeight;
1152                 
1153                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
1154                     width = this.thumbEl.getHeight();
1155                     this.baseScale = width / this.imageEl.OriginWidth;
1156                 }
1157             }
1158             
1159             return;
1160         }
1161         
1162         width = this.thumbEl.getWidth();
1163         this.baseScale = width / this.imageEl.OriginWidth;
1164         
1165         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
1166             height = this.thumbEl.getHeight();
1167             this.baseScale = height / this.imageEl.OriginHeight;
1168         }
1169         
1170         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
1171             
1172             height = this.thumbEl.getHeight();
1173             this.baseScale = height / this.imageEl.OriginHeight;
1174             
1175             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
1176                 width = this.thumbEl.getWidth();
1177                 this.baseScale = width / this.imageEl.OriginWidth;
1178             }
1179             
1180         }
1181
1182         if(this.imageEl.OriginWidth < this.minWidth ) {
1183             this.baseScale = width / this.minWidth;
1184         }
1185
1186         if(this.imageEl.OriginHeight < this.minHeight) {
1187             console.log("HEIGHT");
1188             this.baseScale = height / this.minHeight;
1189         }
1190         
1191         return;
1192     },
1193     
1194     getScaleLevel : function()
1195     {
1196         return this.baseScale * Math.pow(1.02, this.scale);
1197     },
1198     
1199     onTouchStart : function(e)
1200     {
1201         if(!this.canvasLoaded){
1202             this.beforeSelectFile(e);
1203             return;
1204         }
1205         
1206         var touches = e.browserEvent.touches;
1207         
1208         if(!touches){
1209             return;
1210         }
1211         
1212         if(touches.length == 1){
1213             this.onMouseDown(e);
1214             return;
1215         }
1216         
1217         if(touches.length != 2){
1218             return;
1219         }
1220         
1221         var coords = [];
1222         
1223         for(var i = 0, finger; finger = touches[i]; i++){
1224             coords.push(finger.pageX, finger.pageY);
1225         }
1226         
1227         var x = Math.pow(coords[0] - coords[2], 2);
1228         var y = Math.pow(coords[1] - coords[3], 2);
1229         
1230         this.startDistance = Math.sqrt(x + y);
1231         
1232         this.startScale = this.scale;
1233         
1234         this.pinching = true;
1235         this.dragable = false;
1236         
1237     },
1238     
1239     onTouchMove : function(e)
1240     {
1241         if(!this.pinching && !this.dragable){
1242             return;
1243         }
1244         
1245         var touches = e.browserEvent.touches;
1246         
1247         if(!touches){
1248             return;
1249         }
1250         
1251         if(this.dragable){
1252             this.onMouseMove(e);
1253             return;
1254         }
1255         
1256         var coords = [];
1257         
1258         for(var i = 0, finger; finger = touches[i]; i++){
1259             coords.push(finger.pageX, finger.pageY);
1260         }
1261         
1262         var x = Math.pow(coords[0] - coords[2], 2);
1263         var y = Math.pow(coords[1] - coords[3], 2);
1264         
1265         this.endDistance = Math.sqrt(x + y);
1266         
1267         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
1268         
1269         if(!this.zoomable()){
1270             this.scale = this.startScale;
1271             return;
1272         }
1273         
1274         this.draw();
1275         
1276     },
1277     
1278     onTouchEnd : function(e)
1279     {
1280         this.pinching = false;
1281         this.dragable = false;
1282         
1283     },
1284     
1285     process : function(file, crop)
1286     {
1287         if(this.loadMask){
1288             this.maskEl.mask(this.loadingText);
1289         }
1290         
1291         this.xhr = new XMLHttpRequest();
1292         
1293         file.xhr = this.xhr;
1294
1295         this.xhr.open(this.method, this.url, true);
1296         
1297         var headers = {
1298             "Accept": "application/json",
1299             "Cache-Control": "no-cache",
1300             "X-Requested-With": "XMLHttpRequest"
1301         };
1302         
1303         for (var headerName in headers) {
1304             var headerValue = headers[headerName];
1305             if (headerValue) {
1306                 this.xhr.setRequestHeader(headerName, headerValue);
1307             }
1308         }
1309         
1310         var _this = this;
1311         
1312         this.xhr.onload = function()
1313         {
1314             _this.xhrOnLoad(_this.xhr);
1315         }
1316         
1317         this.xhr.onerror = function()
1318         {
1319             _this.xhrOnError(_this.xhr);
1320         }
1321         
1322         var formData = new FormData();
1323
1324         formData.append('returnHTML', 'NO');
1325         
1326         if(crop){
1327             formData.append('crop', crop);
1328         }
1329         
1330         if(typeof(file) != 'undefined' && (typeof(file.id) == 'undefined' || file.id * 1 < 1)){
1331             formData.append(this.paramName, file, file.name);
1332         }
1333         
1334         if(typeof(file.filename) != 'undefined'){
1335             formData.append('filename', file.filename);
1336         }
1337         
1338         if(typeof(file.mimetype) != 'undefined'){
1339             formData.append('mimetype', file.mimetype);
1340         }
1341         
1342         if(this.fireEvent('arrange', this, formData) != false){
1343             this.xhr.send(formData);
1344         };
1345     },
1346     
1347     xhrOnLoad : function(xhr)
1348     {
1349         if(this.loadMask){
1350             this.maskEl.unmask();
1351         }
1352         
1353         if (xhr.readyState !== 4) {
1354             this.fireEvent('exception', this, xhr);
1355             return;
1356         }
1357
1358         var response = Roo.decode(xhr.responseText);
1359         
1360         if(!response.success){
1361             this.fireEvent('exception', this, xhr);
1362             return;
1363         }
1364         
1365         var response = Roo.decode(xhr.responseText);
1366         
1367         this.fireEvent('upload', this, response);
1368         
1369     },
1370     
1371     xhrOnError : function()
1372     {
1373         if(this.loadMask){
1374             this.maskEl.unmask();
1375         }
1376         
1377         Roo.log('xhr on error');
1378         
1379         var response = Roo.decode(xhr.responseText);
1380           
1381         Roo.log(response);
1382         
1383     },
1384     
1385     prepare : function(file)
1386     {   
1387         console.log("PREPARE");
1388         console.log(file);
1389         if(this.loadMask){
1390             this.maskEl.mask(this.loadingText);
1391         }
1392         
1393         this.file = false;
1394         this.exif = {};
1395         
1396         if(typeof(file) === 'string'){
1397             this.loadCanvas(file);
1398             return;
1399         }
1400         
1401         if(!file || !this.urlAPI){
1402             return;
1403         }
1404         
1405         this.file = file;
1406         this.cropType = file.type;
1407         
1408         var _this = this;
1409         
1410         if(this.fireEvent('prepare', this, this.file) != false){
1411             
1412             var reader = new FileReader();
1413             
1414             reader.onload = function (e) {
1415                 if (e.target.error) {
1416                     Roo.log(e.target.error);
1417                     return;
1418                 }
1419                 
1420                 var buffer = e.target.result,
1421                     dataView = new DataView(buffer),
1422                     offset = 2,
1423                     maxOffset = dataView.byteLength - 4,
1424                     markerBytes,
1425                     markerLength;
1426                 
1427                 if (dataView.getUint16(0) === 0xffd8) {
1428                     while (offset < maxOffset) {
1429                         markerBytes = dataView.getUint16(offset);
1430                         
1431                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
1432                             markerLength = dataView.getUint16(offset + 2) + 2;
1433                             if (offset + markerLength > dataView.byteLength) {
1434                                 Roo.log('Invalid meta data: Invalid segment size.');
1435                                 break;
1436                             }
1437                             
1438                             if(markerBytes == 0xffe1){
1439                                 _this.parseExifData(
1440                                     dataView,
1441                                     offset,
1442                                     markerLength
1443                                 );
1444                             }
1445                             
1446                             offset += markerLength;
1447                             
1448                             continue;
1449                         }
1450                         
1451                         break;
1452                     }
1453                     
1454                 }
1455                 
1456                 var url = _this.urlAPI.createObjectURL(_this.file);
1457                 
1458                 _this.loadCanvas(url);
1459                 
1460                 return;
1461             }
1462             
1463             reader.readAsArrayBuffer(this.file);
1464             
1465         }
1466         
1467     },
1468     
1469     parseExifData : function(dataView, offset, length)
1470     {
1471         var tiffOffset = offset + 10,
1472             littleEndian,
1473             dirOffset;
1474     
1475         if (dataView.getUint32(offset + 4) !== 0x45786966) {
1476             // No Exif data, might be XMP data instead
1477             return;
1478         }
1479         
1480         // Check for the ASCII code for "Exif" (0x45786966):
1481         if (dataView.getUint32(offset + 4) !== 0x45786966) {
1482             // No Exif data, might be XMP data instead
1483             return;
1484         }
1485         if (tiffOffset + 8 > dataView.byteLength) {
1486             Roo.log('Invalid Exif data: Invalid segment size.');
1487             return;
1488         }
1489         // Check for the two null bytes:
1490         if (dataView.getUint16(offset + 8) !== 0x0000) {
1491             Roo.log('Invalid Exif data: Missing byte alignment offset.');
1492             return;
1493         }
1494         // Check the byte alignment:
1495         switch (dataView.getUint16(tiffOffset)) {
1496         case 0x4949:
1497             littleEndian = true;
1498             break;
1499         case 0x4D4D:
1500             littleEndian = false;
1501             break;
1502         default:
1503             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
1504             return;
1505         }
1506         // Check for the TIFF tag marker (0x002A):
1507         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
1508             Roo.log('Invalid Exif data: Missing TIFF marker.');
1509             return;
1510         }
1511         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
1512         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
1513         
1514         this.parseExifTags(
1515             dataView,
1516             tiffOffset,
1517             tiffOffset + dirOffset,
1518             littleEndian
1519         );
1520     },
1521     
1522     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
1523     {
1524         var tagsNumber,
1525             dirEndOffset,
1526             i;
1527         if (dirOffset + 6 > dataView.byteLength) {
1528             Roo.log('Invalid Exif data: Invalid directory offset.');
1529             return;
1530         }
1531         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
1532         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
1533         if (dirEndOffset + 4 > dataView.byteLength) {
1534             Roo.log('Invalid Exif data: Invalid directory size.');
1535             return;
1536         }
1537         for (i = 0; i < tagsNumber; i += 1) {
1538             this.parseExifTag(
1539                 dataView,
1540                 tiffOffset,
1541                 dirOffset + 2 + 12 * i, // tag offset
1542                 littleEndian
1543             );
1544         }
1545         // Return the offset to the next directory:
1546         return dataView.getUint32(dirEndOffset, littleEndian);
1547     },
1548     
1549     parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
1550     {
1551         var tag = dataView.getUint16(offset, littleEndian);
1552         
1553         this.exif[tag] = this.getExifValue(
1554             dataView,
1555             tiffOffset,
1556             offset,
1557             dataView.getUint16(offset + 2, littleEndian), // tag type
1558             dataView.getUint32(offset + 4, littleEndian), // tag length
1559             littleEndian
1560         );
1561     },
1562     
1563     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
1564     {
1565         var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
1566             tagSize,
1567             dataOffset,
1568             values,
1569             i,
1570             str,
1571             c;
1572     
1573         if (!tagType) {
1574             Roo.log('Invalid Exif data: Invalid tag type.');
1575             return;
1576         }
1577         
1578         tagSize = tagType.size * length;
1579         // Determine if the value is contained in the dataOffset bytes,
1580         // or if the value at the dataOffset is a pointer to the actual data:
1581         dataOffset = tagSize > 4 ?
1582                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
1583         if (dataOffset + tagSize > dataView.byteLength) {
1584             Roo.log('Invalid Exif data: Invalid data offset.');
1585             return;
1586         }
1587         if (length === 1) {
1588             return tagType.getValue(dataView, dataOffset, littleEndian);
1589         }
1590         values = [];
1591         for (i = 0; i < length; i += 1) {
1592             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
1593         }
1594         
1595         if (tagType.ascii) {
1596             str = '';
1597             // Concatenate the chars:
1598             for (i = 0; i < values.length; i += 1) {
1599                 c = values[i];
1600                 // Ignore the terminating NULL byte(s):
1601                 if (c === '\u0000') {
1602                     break;
1603                 }
1604                 str += c;
1605             }
1606             return str;
1607         }
1608         return values;
1609     }
1610     
1611 });
1612
1613 Roo.apply(Roo.dialog.UploadCropbox, {
1614     tags : {
1615         'Orientation': 0x0112
1616     },
1617     
1618     Orientation: {
1619             1: 0, //'top-left',
1620 //            2: 'top-right',
1621             3: 180, //'bottom-right',
1622 //            4: 'bottom-left',
1623 //            5: 'left-top',
1624             6: 90, //'right-top',
1625 //            7: 'right-bottom',
1626             8: 270 //'left-bottom'
1627     },
1628     
1629     exifTagTypes : {
1630         // byte, 8-bit unsigned int:
1631         1: {
1632             getValue: function (dataView, dataOffset) {
1633                 return dataView.getUint8(dataOffset);
1634             },
1635             size: 1
1636         },
1637         // ascii, 8-bit byte:
1638         2: {
1639             getValue: function (dataView, dataOffset) {
1640                 return String.fromCharCode(dataView.getUint8(dataOffset));
1641             },
1642             size: 1,
1643             ascii: true
1644         },
1645         // short, 16 bit int:
1646         3: {
1647             getValue: function (dataView, dataOffset, littleEndian) {
1648                 return dataView.getUint16(dataOffset, littleEndian);
1649             },
1650             size: 2
1651         },
1652         // long, 32 bit int:
1653         4: {
1654             getValue: function (dataView, dataOffset, littleEndian) {
1655                 return dataView.getUint32(dataOffset, littleEndian);
1656             },
1657             size: 4
1658         },
1659         // rational = two long values, first is numerator, second is denominator:
1660         5: {
1661             getValue: function (dataView, dataOffset, littleEndian) {
1662                 return dataView.getUint32(dataOffset, littleEndian) /
1663                     dataView.getUint32(dataOffset + 4, littleEndian);
1664             },
1665             size: 8
1666         },
1667         // slong, 32 bit signed int:
1668         9: {
1669             getValue: function (dataView, dataOffset, littleEndian) {
1670                 return dataView.getInt32(dataOffset, littleEndian);
1671             },
1672             size: 4
1673         },
1674         // srational, two slongs, first is numerator, second is denominator:
1675         10: {
1676             getValue: function (dataView, dataOffset, littleEndian) {
1677                 return dataView.getInt32(dataOffset, littleEndian) /
1678                     dataView.getInt32(dataOffset + 4, littleEndian);
1679             },
1680             size: 8
1681         }
1682     },
1683     
1684     footer : {
1685         STANDARD : [
1686             {
1687                 tag : 'div',
1688                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1689                 action : 'rotate-left',
1690                 cn : [
1691                     {
1692                         tag : 'button',
1693                         cls : 'btn btn-default',
1694                         html : '<i class="fa fa-undo"></i>'
1695                     }
1696                 ]
1697             },
1698             {
1699                 tag : 'div',
1700                 cls : 'btn-group roo-upload-cropbox-picture',
1701                 action : 'picture',
1702                 cn : [
1703                     {
1704                         tag : 'button',
1705                         cls : 'btn btn-default',
1706                         html : '<i class="fa fa-picture-o"></i>'
1707                     }
1708                 ]
1709             },
1710             {
1711                 tag : 'div',
1712                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1713                 action : 'rotate-right',
1714                 cn : [
1715                     {
1716                         tag : 'button',
1717                         cls : 'btn btn-default',
1718                         html : '<i class="fa fa-repeat"></i>'
1719                     }
1720                 ]
1721             }
1722         ],
1723         DOCUMENT : [
1724             {
1725                 tag : 'div',
1726                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1727                 action : 'rotate-left',
1728                 cn : [
1729                     {
1730                         tag : 'button',
1731                         cls : 'btn btn-default',
1732                         html : '<i class="fa fa-undo"></i>'
1733                     }
1734                 ]
1735             },
1736             {
1737                 tag : 'div',
1738                 cls : 'btn-group roo-upload-cropbox-download',
1739                 action : 'download',
1740                 cn : [
1741                     {
1742                         tag : 'button',
1743                         cls : 'btn btn-default',
1744                         html : '<i class="fa fa-download"></i>'
1745                     }
1746                 ]
1747             },
1748             {
1749                 tag : 'div',
1750                 cls : 'btn-group roo-upload-cropbox-crop',
1751                 action : 'crop',
1752                 cn : [
1753                     {
1754                         tag : 'button',
1755                         cls : 'btn btn-default',
1756                         html : '<i class="fa fa-crop"></i>'
1757                     }
1758                 ]
1759             },
1760             {
1761                 tag : 'div',
1762                 cls : 'btn-group roo-upload-cropbox-trash',
1763                 action : 'trash',
1764                 cn : [
1765                     {
1766                         tag : 'button',
1767                         cls : 'btn btn-default',
1768                         html : '<i class="fa fa-trash"></i>'
1769                     }
1770                 ]
1771             },
1772             {
1773                 tag : 'div',
1774                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1775                 action : 'rotate-right',
1776                 cn : [
1777                     {
1778                         tag : 'button',
1779                         cls : 'btn btn-default',
1780                         html : '<i class="fa fa-repeat"></i>'
1781                     }
1782                 ]
1783             }
1784         ],
1785         ROTATOR : [
1786             {
1787                 tag : 'div',
1788                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1789                 action : 'rotate-left',
1790                 cn : [
1791                     {
1792                         tag : 'button',
1793                         cls : 'btn btn-default',
1794                         html : '<i class="fa fa-undo"></i>'
1795                     }
1796                 ]
1797             },
1798             {
1799                 tag : 'div',
1800                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1801                 action : 'rotate-right',
1802                 cn : [
1803                     {
1804                         tag : 'button',
1805                         cls : 'btn btn-default',
1806                         html : '<i class="fa fa-repeat"></i>'
1807                     }
1808                 ]
1809             }
1810         ]
1811     }
1812 });