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 {XMLHttpRequest} xhr
  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 inspect
 102          * Fire when inspect the file
 103          * @param {Roo.bootstrap.UploadCropbox} this
 104          * @param {Object} file
 105          */
 106         "inspect" : true,
 107         /**
 108          * @event upload
 109          * Fire when xhr upload the file
 110          * @param {Roo.bootstrap.UploadCropbox} this
 111          * @param {Object} data
 112          */
 113         "upload" : true
 114     });
 115
 116     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
 117 };
 118
 119 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
 120
 121     emptyText : 'Click to upload image',
 122     rotateNotify : 'Image is too small to rotate',
 123     errorTimeout : 3000,
 124     scale : 0,
 125     baseScale : 1,
 126     rotate : 0,
 127     dragable : false,
 128     pinching : false,
 129     mouseX : 0,
 130     mouseY : 0,
 131     cropData : false,
 132     minWidth : 300,
 133     minHeight : 300,
 134     file : false,
 135     exif : {},
 136     baseRotate : 1,
 137     cropType : 'image/jpeg',
 138     buttons : false,
 139     canvasLoaded : false,
 140     isDocument : false,
 141
 142     getAutoCreate : function()
 143     {
 144         var cfg = {
 145             tag : 'div',
 146             cls : 'roo-upload-cropbox',
 147             cn : [
 148                 {
 149                     tag : 'div',
 150                     cls : 'roo-upload-cropbox-body',
 151                     style : 'cursor:pointer',
 152                     cn : [
 153                         {
 154                             tag : 'input',
 155                             cls : 'roo-upload-cropbox-selector',
 156                             type : 'file'
 157                         },
 158                         {
 159                             tag : 'div',
 160                             cls : 'roo-upload-cropbox-preview'
 161                         },
 162                         {
 163                             tag : 'div',
 164                             cls : 'roo-upload-cropbox-thumb'
 165                         },
 166                         {
 167                             tag : 'div',
 168                             cls : 'roo-upload-cropbox-empty-notify',
 169                             html : this.emptyText
 170                         },
 171                         {
 172                             tag : 'div',
 173                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
 174                             html : this.rotateNotify
 175                         }
 176                     ]
 177                 },
 178                 {
 179                     tag : 'div',
 180                     cls : 'roo-upload-cropbox-footer',
 181                     cn : {
 182                         tag : 'div',
 183                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
 184                         cn : []
 185                     }
 186                 }
 187             ]
 188         };
 189
 190         return cfg;
 191     },
 192
 193     onRender : function(ct, position)
 194     {
 195         Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
 196
 197         if (this.buttons.length) {
 198
 199             Roo.each(this.buttons, function(bb) {
 200
 201                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
 202
 203                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
 204
 205             }, this);
 206         }
 207     },
 208
 209     initEvents : function()
 210     {
 211         this.urlAPI = (window.createObjectURL && window) ||
 212                                 (window.URL && URL.revokeObjectURL && URL) ||
 213                                 (window.webkitURL && webkitURL);
 214
 215         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
 216         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 217
 218         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
 219         this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 220         this.selectorEl.hide();
 221
 222         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
 223         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 224
 225         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
 226         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 227         this.thumbEl.hide();
 228
 229         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
 230         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 231
 232         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
 233         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 234         this.errorEl.hide();
 235
 236         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
 237         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 238         this.footerEl.hide();
 239
 240         this.setThumbBoxSize();
 241
 242         this.bind();
 243
 244         this.resize();
 245
 246         this.fireEvent('initial', this);
 247     },
 248
 249     bind : function()
 250     {
 251         var _this = this;
 252
 253         window.addEventListener("resize", function() { _this.resize(); } );
 254
 255         this.bodyEl.on('click', this.beforeSelectFile, this);
 256
 257         if(Roo.isTouch){
 258             this.bodyEl.on('touchstart', this.onTouchStart, this);
 259             this.bodyEl.on('touchmove', this.onTouchMove, this);
 260             this.bodyEl.on('touchend', this.onTouchEnd, this);
 261         }
 262
 263         if(!Roo.isTouch){
 264             this.bodyEl.on('mousedown', this.onMouseDown, this);
 265             this.bodyEl.on('mousemove', this.onMouseMove, this);
 266             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
 267             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
 268             Roo.get(document).on('mouseup', this.onMouseUp, this);
 269         }
 270
 271         this.selectorEl.on('change', this.onFileSelected, this);
 272     },
 273
 274     reset : function()
 275     {
 276         this.scale = 0;
 277         this.baseScale = 1;
 278         this.rotate = 0;
 279         this.baseRotate = 1;
 280         this.dragable = false;
 281         this.pinching = false;
 282         this.mouseX = 0;
 283         this.mouseY = 0;
 284         this.cropData = false;
 285         this.notifyEl.dom.innerHTML = this.emptyText;
 286
 287     },
 288
 289     resize : function()
 290     {
 291         if(this.fireEvent('resize', this) != false){
 292             this.setThumbBoxPosition();
 293             this.setCanvasPosition();
 294         }
 295     },
 296
 297     onFooterButtonClick : function(e, el, o, type)
 298     {
 299         switch (type) {
 300             case 'rotate-left' :
 301                 this.onRotateLeft(e);
 302                 break;
 303             case 'rotate-right' :
 304                 this.onRotateRight(e);
 305                 break;
 306             case 'picture' :
 307                 this.beforeSelectFile(e);
 308                 break;
 309             case 'trash' :
 310                 this.trash(e);
 311                 break;
 312             case 'crop' :
 313                 this.crop(e);
 314                 break;
 315             case 'download' :
 316                 this.download(e);
 317                 break;
 318             default :
 319                 break;
 320         }
 321
 322         this.fireEvent('footerbuttonclick', this, type);
 323     },
 324
 325     beforeSelectFile : function(e)
 326     {
 327         e.preventDefault();
 328
 329         if(this.fireEvent('beforeselectfile', this) != false){
 330             this.selectorEl.dom.click();
 331         }
 332     },
 333
 334     onFileSelected : function(e)
 335     {
 336         e.preventDefault();
 337
 338         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 339             return;
 340         }
 341
 342         var file = this.selectorEl.dom.files[0];
 343
 344         if(this.fireEvent('inspect', this, file) != false){
 345             this.prepare(file);
 346         }
 347
 348         this.selectorEl.dom.value = '';
 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         return;
 972
 973     },
 974
 975     setThumbBoxSize : function()
 976     {
 977         var width, height;
 978
 979         if(this.isDocument && typeof(this.imageEl) != 'undefined'){
 980             width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
 981             height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
 982
 983             this.minWidth = width;
 984             this.minHeight = height;
 985
 986             if(this.rotate == 90 || this.rotate == 270){
 987                 this.minWidth = height;
 988                 this.minHeight = width;
 989             }
 990         }
 991
 992         height = 300;
 993         width = Math.ceil(this.minWidth * height / this.minHeight);
 994
 995         if(this.minWidth > this.minHeight){
 996             width = 300;
 997             height = Math.ceil(this.minHeight * width / this.minWidth);
 998         }
 999
1000         this.thumbEl.setStyle({
1001             width : width + 'px',
1002             height : height + 'px'
1003         });
1004
1005         return;
1006
1007     },
1008
1009     setThumbBoxPosition : function()
1010     {
1011         var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
1012         var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
1013
1014         this.thumbEl.setLeft(x);
1015         this.thumbEl.setTop(y);
1016
1017     },
1018
1019     baseRotateLevel : function()
1020     {
1021         this.baseRotate = 1;
1022
1023         if(
1024                 typeof(this.exif) != 'undefined' &&
1025                 typeof(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
1026                 [1, 3, 6, 8].indexOf(this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']]) != -1
1027         ){
1028             this.baseRotate = this.exif[Roo.bootstrap.UploadCropbox['tags']['Orientation']];
1029         }
1030
1031         this.rotate = Roo.bootstrap.UploadCropbox['Orientation'][this.baseRotate];
1032
1033     },
1034
1035     baseScaleLevel : function()
1036     {
1037         var width, height;
1038
1039         if(this.isDocument){
1040
1041             if(this.baseRotate == 6 || this.baseRotate == 8){
1042
1043                 height = this.thumbEl.getHeight();
1044                 this.baseScale = height / this.imageEl.OriginWidth;
1045
1046                 if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
1047                     width = this.thumbEl.getWidth();
1048                     this.baseScale = width / this.imageEl.OriginHeight;
1049                 }
1050
1051                 return;
1052             }
1053
1054             height = this.thumbEl.getHeight();
1055             this.baseScale = height / this.imageEl.OriginHeight;
1056
1057             if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
1058                 width = this.thumbEl.getWidth();
1059                 this.baseScale = width / this.imageEl.OriginWidth;
1060             }
1061
1062             return;
1063         }
1064
1065         if(this.baseRotate == 6 || this.baseRotate == 8){
1066
1067             width = this.thumbEl.getHeight();
1068             this.baseScale = width / this.imageEl.OriginHeight;
1069
1070             if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
1071                 height = this.thumbEl.getWidth();
1072                 this.baseScale = height / this.imageEl.OriginHeight;
1073             }
1074
1075             if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
1076                 height = this.thumbEl.getWidth();
1077                 this.baseScale = height / this.imageEl.OriginHeight;
1078
1079                 if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
1080                     width = this.thumbEl.getHeight();
1081                     this.baseScale = width / this.imageEl.OriginWidth;
1082                 }
1083             }
1084
1085             return;
1086         }
1087
1088         width = this.thumbEl.getWidth();
1089         this.baseScale = width / this.imageEl.OriginWidth;
1090
1091         if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
1092             height = this.thumbEl.getHeight();
1093             this.baseScale = height / this.imageEl.OriginHeight;
1094         }
1095
1096         if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
1097
1098             height = this.thumbEl.getHeight();
1099             this.baseScale = height / this.imageEl.OriginHeight;
1100
1101             if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
1102                 width = this.thumbEl.getWidth();
1103                 this.baseScale = width / this.imageEl.OriginWidth;
1104             }
1105
1106         }
1107
1108         return;
1109     },
1110
1111     getScaleLevel : function()
1112     {
1113         return this.baseScale * Math.pow(1.1, this.scale);
1114     },
1115
1116     onTouchStart : function(e)
1117     {
1118         if(!this.canvasLoaded){
1119             this.beforeSelectFile(e);
1120             return;
1121         }
1122
1123         var touches = e.browserEvent.touches;
1124
1125         if(!touches){
1126             return;
1127         }
1128
1129         if(touches.length == 1){
1130             this.onMouseDown(e);
1131             return;
1132         }
1133
1134         if(touches.length != 2){
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.startDistance = Math.sqrt(x + y);
1148
1149         this.startScale = this.scale;
1150
1151         this.pinching = true;
1152         this.dragable = false;
1153
1154     },
1155
1156     onTouchMove : function(e)
1157     {
1158         if(!this.pinching && !this.dragable){
1159             return;
1160         }
1161
1162         var touches = e.browserEvent.touches;
1163
1164         if(!touches){
1165             return;
1166         }
1167
1168         if(this.dragable){
1169             this.onMouseMove(e);
1170             return;
1171         }
1172
1173         var coords = [];
1174
1175         for(var i = 0, finger; finger = touches[i]; i++){
1176             coords.push(finger.pageX, finger.pageY);
1177         }
1178
1179         var x = Math.pow(coords[0] - coords[2], 2);
1180         var y = Math.pow(coords[1] - coords[3], 2);
1181
1182         this.endDistance = Math.sqrt(x + y);
1183
1184         this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
1185
1186         if(!this.zoomable()){
1187             this.scale = this.startScale;
1188             return;
1189         }
1190
1191         this.draw();
1192
1193     },
1194
1195     onTouchEnd : function(e)
1196     {
1197         this.pinching = false;
1198         this.dragable = false;
1199
1200     },
1201
1202     process : function(file, crop)
1203     {
1204         this.xhr = new XMLHttpRequest();
1205
1206         if(typeof(this.file.id) != 'undefined' && this.file.id * 1 > 0){
1207             return;
1208         }
1209
1210         file.xhr = this.xhr;
1211
1212         this.xhr.open(this.method, this.url, true);
1213
1214         var headers = {
1215             "Accept": "application/json",
1216             "Cache-Control": "no-cache",
1217             "X-Requested-With": "XMLHttpRequest"
1218         };
1219
1220         for (var headerName in headers) {
1221             var headerValue = headers[headerName];
1222             if (headerValue) {
1223                 this.xhr.setRequestHeader(headerName, headerValue);
1224             }
1225         }
1226
1227         var _this = this;
1228
1229         this.xhr.onload = function()
1230         {
1231             _this.xhrOnLoad(_this.xhr);
1232         }
1233
1234         this.xhr.onerror = function()
1235         {
1236             _this.xhrOnError(_this.xhr);
1237         }
1238
1239         var formData = new FormData();
1240
1241         formData.append('returnHTML', 'NO');
1242
1243         if(crop){
1244             formData.append('crop', crop);
1245         }
1246
1247         formData.append(this.paramName, file, file.name);
1248
1249         if(this.fireEvent('arrange', this, formData) != false){
1250             this.xhr.send(formData);
1251         };
1252     },
1253
1254     xhrOnLoad : function(xhr)
1255     {
1256         if (xhr.readyState !== 4) {
1257             this.fireEvent('exception', this, xhr);
1258             return;
1259         }
1260
1261         var response = Roo.decode(xhr.responseText);
1262
1263         if(!response.success){
1264             this.fireEvent('exception', this, xhr);
1265             return;
1266         }
1267
1268         var response = Roo.decode(xhr.responseText);
1269
1270         this.fireEvent('upload', this, response);
1271
1272     },
1273
1274     xhrOnError : function()
1275     {
1276         Roo.log('xhr on error');
1277
1278         var response = Roo.decode(xhr.responseText);
1279
1280         Roo.log(response);
1281
1282     },
1283
1284     uploadFromSource : function(file, crop)
1285     {
1286         this.xhr = new XMLHttpRequest();
1287
1288         this.xhr.open(this.method, this.url, true);
1289
1290         var headers = {
1291             "Accept": "application/json",
1292             "Cache-Control": "no-cache",
1293             "X-Requested-With": "XMLHttpRequest"
1294         };
1295
1296         for (var headerName in headers) {
1297             var headerValue = headers[headerName];
1298             if (headerValue) {
1299                 this.xhr.setRequestHeader(headerName, headerValue);
1300             }
1301         }
1302
1303         var _this = this;
1304
1305         this.xhr.onload = function()
1306         {
1307             _this.xhrOnLoad(_this.xhr);
1308         }
1309
1310         this.xhr.onerror = function()
1311         {
1312             _this.xhrOnError(_this.xhr);
1313         }
1314
1315         var formData = new FormData();
1316
1317         formData.append('returnHTML', 'NO');
1318
1319         formData.append('crop', crop);
1320
1321         if(typeof(file.filename) != 'undefined'){
1322             formData.append('filename', file.filename);
1323         }
1324
1325         if(typeof(file.mimetype) != 'undefined'){
1326             formData.append('mimetype', file.mimetype);
1327         }
1328
1329         if(this.fireEvent('arrange', this, formData) != false){
1330             this.xhr.send(formData);
1331         };
1332     },
1333
1334     prepare : function(file)
1335     {
1336         this.file = false;
1337         this.exif = {};
1338
1339         if(typeof(file) === 'string'){
1340             this.loadCanvas(file);
1341             return;
1342         }
1343
1344         if(!file || !this.urlAPI){
1345             return;
1346         }
1347
1348         this.file = file;
1349         this.cropType = file.type;
1350
1351         var _this = this;
1352
1353         if(this.fireEvent('prepare', this, this.file) != false){
1354
1355             var reader = new FileReader();
1356
1357             reader.onload = function (e) {
1358                 if (e.target.error) {
1359                     Roo.log(e.target.error);
1360                     return;
1361                 }
1362
1363                 var buffer = e.target.result,
1364                     dataView = new DataView(buffer),
1365                     offset = 2,
1366                     maxOffset = dataView.byteLength - 4,
1367                     markerBytes,
1368                     markerLength;
1369
1370                 if (dataView.getUint16(0) === 0xffd8) {
1371                     while (offset < maxOffset) {
1372                         markerBytes = dataView.getUint16(offset);
1373
1374                         if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
1375                             markerLength = dataView.getUint16(offset + 2) + 2;
1376                             if (offset + markerLength > dataView.byteLength) {
1377                                 Roo.log('Invalid meta data: Invalid segment size.');
1378                                 break;
1379                             }
1380
1381                             if(markerBytes == 0xffe1){
1382                                 _this.parseExifData(
1383                                     dataView,
1384                                     offset,
1385                                     markerLength
1386                                 );
1387                             }
1388
1389                             offset += markerLength;
1390
1391                             continue;
1392                         }
1393
1394                         break;
1395                     }
1396
1397                 }
1398
1399                 var url = _this.urlAPI.createObjectURL(_this.file);
1400
1401                 _this.loadCanvas(url);
1402
1403                 return;
1404             }
1405
1406             reader.readAsArrayBuffer(this.file);
1407
1408         }
1409
1410     },
1411
1412     parseExifData : function(dataView, offset, length)
1413     {
1414         var tiffOffset = offset + 10,
1415             littleEndian,
1416             dirOffset;
1417
1418         if (dataView.getUint32(offset + 4) !== 0x45786966) {
1419             // No Exif data, might be XMP data instead
1420             return;
1421         }
1422
1423         // Check for the ASCII code for "Exif" (0x45786966):
1424         if (dataView.getUint32(offset + 4) !== 0x45786966) {
1425             // No Exif data, might be XMP data instead
1426             return;
1427         }
1428         if (tiffOffset + 8 > dataView.byteLength) {
1429             Roo.log('Invalid Exif data: Invalid segment size.');
1430             return;
1431         }
1432         // Check for the two null bytes:
1433         if (dataView.getUint16(offset + 8) !== 0x0000) {
1434             Roo.log('Invalid Exif data: Missing byte alignment offset.');
1435             return;
1436         }
1437         // Check the byte alignment:
1438         switch (dataView.getUint16(tiffOffset)) {
1439         case 0x4949:
1440             littleEndian = true;
1441             break;
1442         case 0x4D4D:
1443             littleEndian = false;
1444             break;
1445         default:
1446             Roo.log('Invalid Exif data: Invalid byte alignment marker.');
1447             return;
1448         }
1449         // Check for the TIFF tag marker (0x002A):
1450         if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
1451             Roo.log('Invalid Exif data: Missing TIFF marker.');
1452             return;
1453         }
1454         // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
1455         dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
1456
1457         this.parseExifTags(
1458             dataView,
1459             tiffOffset,
1460             tiffOffset + dirOffset,
1461             littleEndian
1462         );
1463     },
1464
1465     parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
1466     {
1467         var tagsNumber,
1468             dirEndOffset,
1469             i;
1470         if (dirOffset + 6 > dataView.byteLength) {
1471             Roo.log('Invalid Exif data: Invalid directory offset.');
1472             return;
1473         }
1474         tagsNumber = dataView.getUint16(dirOffset, littleEndian);
1475         dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
1476         if (dirEndOffset + 4 > dataView.byteLength) {
1477             Roo.log('Invalid Exif data: Invalid directory size.');
1478             return;
1479         }
1480         for (i = 0; i < tagsNumber; i += 1) {
1481             this.parseExifTag(
1482                 dataView,
1483                 tiffOffset,
1484                 dirOffset + 2 + 12 * i, // tag offset
1485                 littleEndian
1486             );
1487         }
1488         // Return the offset to the next directory:
1489         return dataView.getUint32(dirEndOffset, littleEndian);
1490     },
1491
1492     parseExifTag : function (dataView, tiffOffset, offset, littleEndian)
1493     {
1494         var tag = dataView.getUint16(offset, littleEndian);
1495
1496         this.exif[tag] = this.getExifValue(
1497             dataView,
1498             tiffOffset,
1499             offset,
1500             dataView.getUint16(offset + 2, littleEndian), // tag type
1501             dataView.getUint32(offset + 4, littleEndian), // tag length
1502             littleEndian
1503         );
1504     },
1505
1506     getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
1507     {
1508         var tagType = Roo.bootstrap.UploadCropbox.exifTagTypes[type],
1509             tagSize,
1510             dataOffset,
1511             values,
1512             i,
1513             str,
1514             c;
1515
1516         if (!tagType) {
1517             Roo.log('Invalid Exif data: Invalid tag type.');
1518             return;
1519         }
1520
1521         tagSize = tagType.size * length;
1522         // Determine if the value is contained in the dataOffset bytes,
1523         // or if the value at the dataOffset is a pointer to the actual data:
1524         dataOffset = tagSize > 4 ?
1525                 tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
1526         if (dataOffset + tagSize > dataView.byteLength) {
1527             Roo.log('Invalid Exif data: Invalid data offset.');
1528             return;
1529         }
1530         if (length === 1) {
1531             return tagType.getValue(dataView, dataOffset, littleEndian);
1532         }
1533         values = [];
1534         for (i = 0; i < length; i += 1) {
1535             values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
1536         }
1537
1538         if (tagType.ascii) {
1539             str = '';
1540             // Concatenate the chars:
1541             for (i = 0; i < values.length; i += 1) {
1542                 c = values[i];
1543                 // Ignore the terminating NULL byte(s):
1544                 if (c === '\u0000') {
1545                     break;
1546                 }
1547                 str += c;
1548             }
1549             return str;
1550         }
1551         return values;
1552     }
1553
1554 });
1555
1556 Roo.apply(Roo.bootstrap.UploadCropbox, {
1557     tags : {
1558         'Orientation': 0x0112
1559     },
1560
1561     Orientation: {
1562             1: 0, //'top-left',
1563 //            2: 'top-right',
1564             3: 180, //'bottom-right',
1565 //            4: 'bottom-left',
1566 //            5: 'left-top',
1567             6: 90, //'right-top',
1568 //            7: 'right-bottom',
1569             8: 270 //'left-bottom'
1570     },
1571
1572     exifTagTypes : {
1573         // byte, 8-bit unsigned int:
1574         1: {
1575             getValue: function (dataView, dataOffset) {
1576                 return dataView.getUint8(dataOffset);
1577             },
1578             size: 1
1579         },
1580         // ascii, 8-bit byte:
1581         2: {
1582             getValue: function (dataView, dataOffset) {
1583                 return String.fromCharCode(dataView.getUint8(dataOffset));
1584             },
1585             size: 1,
1586             ascii: true
1587         },
1588         // short, 16 bit int:
1589         3: {
1590             getValue: function (dataView, dataOffset, littleEndian) {
1591                 return dataView.getUint16(dataOffset, littleEndian);
1592             },
1593             size: 2
1594         },
1595         // long, 32 bit int:
1596         4: {
1597             getValue: function (dataView, dataOffset, littleEndian) {
1598                 return dataView.getUint32(dataOffset, littleEndian);
1599             },
1600             size: 4
1601         },
1602         // rational = two long values, first is numerator, second is denominator:
1603         5: {
1604             getValue: function (dataView, dataOffset, littleEndian) {
1605                 return dataView.getUint32(dataOffset, littleEndian) /
1606                     dataView.getUint32(dataOffset + 4, littleEndian);
1607             },
1608             size: 8
1609         },
1610         // slong, 32 bit signed int:
1611         9: {
1612             getValue: function (dataView, dataOffset, littleEndian) {
1613                 return dataView.getInt32(dataOffset, littleEndian);
1614             },
1615             size: 4
1616         },
1617         // srational, two slongs, first is numerator, second is denominator:
1618         10: {
1619             getValue: function (dataView, dataOffset, littleEndian) {
1620                 return dataView.getInt32(dataOffset, littleEndian) /
1621                     dataView.getInt32(dataOffset + 4, littleEndian);
1622             },
1623             size: 8
1624         }
1625     },
1626
1627     footer : {
1628         STANDARD : [
1629             {
1630                 tag : 'div',
1631                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1632                 action : 'rotate-left',
1633                 cn : [
1634                     {
1635                         tag : 'button',
1636                         cls : 'btn btn-default',
1637                         html : '<i class="fa fa-undo"></i>'
1638                     }
1639                 ]
1640             },
1641             {
1642                 tag : 'div',
1643                 cls : 'btn-group roo-upload-cropbox-picture',
1644                 action : 'picture',
1645                 cn : [
1646                     {
1647                         tag : 'button',
1648                         cls : 'btn btn-default',
1649                         html : '<i class="fa fa-picture-o"></i>'
1650                     }
1651                 ]
1652             },
1653             {
1654                 tag : 'div',
1655                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1656                 action : 'rotate-right',
1657                 cn : [
1658                     {
1659                         tag : 'button',
1660                         cls : 'btn btn-default',
1661                         html : '<i class="fa fa-repeat"></i>'
1662                     }
1663                 ]
1664             }
1665         ],
1666         DOCUMENT : [
1667             {
1668                 tag : 'div',
1669                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1670                 action : 'rotate-left',
1671                 cn : [
1672                     {
1673                         tag : 'button',
1674                         cls : 'btn btn-default',
1675                         html : '<i class="fa fa-undo"></i>'
1676                     }
1677                 ]
1678             },
1679             {
1680                 tag : 'div',
1681                 cls : 'btn-group roo-upload-cropbox-download',
1682                 action : 'download',
1683                 cn : [
1684                     {
1685                         tag : 'button',
1686                         cls : 'btn btn-default',
1687                         html : '<i class="fa fa-download"></i>'
1688                     }
1689                 ]
1690             },
1691             {
1692                 tag : 'div',
1693                 cls : 'btn-group roo-upload-cropbox-crop',
1694                 action : 'crop',
1695                 cn : [
1696                     {
1697                         tag : 'button',
1698                         cls : 'btn btn-default',
1699                         html : '<i class="fa fa-crop"></i>'
1700                     }
1701                 ]
1702             },
1703             {
1704                 tag : 'div',
1705                 cls : 'btn-group roo-upload-cropbox-trash',
1706                 action : 'trash',
1707                 cn : [
1708                     {
1709                         tag : 'button',
1710                         cls : 'btn btn-default',
1711                         html : '<i class="fa fa-trash"></i>'
1712                     }
1713                 ]
1714             },
1715             {
1716                 tag : 'div',
1717                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1718                 action : 'rotate-right',
1719                 cn : [
1720                     {
1721                         tag : 'button',
1722                         cls : 'btn btn-default',
1723                         html : '<i class="fa fa-repeat"></i>'
1724                     }
1725                 ]
1726             }
1727         ],
1728         ROTATOR : [
1729             {
1730                 tag : 'div',
1731                 cls : 'btn-group roo-upload-cropbox-rotate-left',
1732                 action : 'rotate-left',
1733                 cn : [
1734                     {
1735                         tag : 'button',
1736                         cls : 'btn btn-default',
1737                         html : '<i class="fa fa-undo"></i>'
1738                     }
1739                 ]
1740             },
1741             {
1742                 tag : 'div',
1743                 cls : 'btn-group roo-upload-cropbox-rotate-right',
1744                 action : 'rotate-right',
1745                 cn : [
1746                     {
1747                         tag : 'button',
1748                         cls : 'btn btn-default',
1749                         html : '<i class="fa fa-repeat"></i>'
1750                     }
1751                 ]
1752             }
1753         ]
1754     }
1755 });