git.roojs.org Git - roojs1/blob - Roo/bootstrap/UploadCropbox.js

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