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