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