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