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