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

   1
   2 /*
   3 * Licence: LGPL
   4 */
   5
   6 /**
   7  * @class Roo.bootstrap.UploadCropbox
   8  * @extends Roo.bootstrap.Component
   9  * Bootstrap UploadCropbox class
  10  * @cfg {String} emptyText show when image has been loaded
  11  * @cfg {String} rotateNotify show when image too small to rotate
  12  * @cfg {Number} errorTimeout default 3000
  13  * @cfg {Number} minWidth default 300
  14  * @cfg {Number} minHeight default 300
  15  * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
  16  * @cfg {Boolean} isDocument (true|false) default false
  17  * @cfg {String} url action url
  18  *
  19  * @constructor
  20  * Create a new UploadCropbox
  21  * @param {Object} config The config object
  22  */
  23
  24 Roo.bootstrap.UploadCropbox = function(config){
  25     Roo.bootstrap.UploadCropbox.superclass.constructor.call(this, config);
  26
  27     this.addEvents({
  28         /**
  29          * @event beforeselectfile
  30          * Fire before select file
  31          * @param {Roo.bootstrap.UploadCropbox} this
  32          */
  33         "beforeselectfile" : true,
  34         /**
  35          * @event initial
  36          * Fire after initEvent
  37          * @param {Roo.bootstrap.UploadCropbox} this
  38          */
  39         "initial" : true,
  40         /**
  41          * @event crop
  42          * Fire after initEvent
  43          * @param {Roo.bootstrap.UploadCropbox} this
  44          * @param {String} data
  45          */
  46         "crop" : true,
  47         /**
  48          * @event prepare
  49          * Fire when preparing the file data
  50          * @param {Roo.bootstrap.UploadCropbox} this
  51          * @param {Object} file
  52          */
  53         "prepare" : true,
  54         /**
  55          * @event exception
  56          * Fire when get exception
  57          * @param {Roo.bootstrap.UploadCropbox} this
  58          * @param {Object} options
  59          */
  60         "exception" : true,
  61         /**
  62          * @event beforeloadcanvas
  63          * Fire before load the canvas
  64          * @param {Roo.bootstrap.UploadCropbox} this
  65          * @param {String} src
  66          */
  67         "beforeloadcanvas" : true,
  68         /**
  69          * @event trash
  70          * Fire when trash image
  71          * @param {Roo.bootstrap.UploadCropbox} this
  72          */
  73         "trash" : true,
  74         /**
  75          * @event download
  76          * Fire when download the image
  77          * @param {Roo.bootstrap.UploadCropbox} this
  78          */
  79         "download" : true,
  80         /**
  81          * @event footerbuttonclick
  82          * Fire when footerbuttonclick
  83          * @param {Roo.bootstrap.UploadCropbox} this
  84          * @param {String} type
  85          */
  86         "footerbuttonclick" : true,
  87         /**
  88          * @event resize
  89          * Fire when resize
  90          * @param {Roo.bootstrap.UploadCropbox} this
  91          */
  92         "resize" : true,
  93         /**
  94          * @event rotate
  95          * Fire when rotate the image
  96          * @param {Roo.bootstrap.UploadCropbox} this
  97          * @param {String} pos
  98          */
  99         "rotate" : true,
 100         /**
 101          * @event exception
 102          * Fire when xhr load exception
 103          * @param {Roo.bootstrap.UploadCropbox} this
 104          * @param {XMLHttpRequest} xhr
 105          */
 106         "exception" : true,
 107         /**
 108          * @event upload
 109          * Fire when xhr upload the file
 110          * @param {Roo.bootstrap.UploadCropbox} this
 111          * @param {Object} data
 112          */
 113         "upload" : true
 114     });
 115
 116     this.buttons = this.buttons || Roo.bootstrap.UploadCropbox.footer.STANDARD;
 117 };
 118
 119 Roo.extend(Roo.bootstrap.UploadCropbox, Roo.bootstrap.Component,  {
 120
 121     emptyText : 'Click to upload image',
 122     rotateNotify : 'Image is too small to rotate',
 123     errorTimeout : 3000,
 124     scale : 0,
 125     baseScale : 1,
 126     rotate : 0,
 127     dragable : false,
 128     pinching : false,
 129     mouseX : 0,
 130     mouseY : 0,
 131     cropData : false,
 132     minWidth : 300,
 133     minHeight : 300,
 134     file : false,
 135     exif : {},
 136     baseRotate : 1,
 137     cropType : 'image/jpeg',
 138     buttons : false,
 139     canvasLoaded : false,
 140     isDocument : false,
 141
 142     getAutoCreate : function()
 143     {
 144         var cfg = {
 145             tag : 'div',
 146             cls : 'roo-upload-cropbox',
 147             cn : [
 148                 {
 149                     tag : 'div',
 150                     cls : 'roo-upload-cropbox-body',
 151                     style : 'cursor:pointer',
 152                     cn : [
 153                         {
 154                             tag : 'input',
 155                             cls : 'roo-upload-cropbox-selector',
 156                             type : 'file'
 157                         },
 158                         {
 159                             tag : 'div',
 160                             cls : 'roo-upload-cropbox-preview'
 161                         },
 162                         {
 163                             tag : 'div',
 164                             cls : 'roo-upload-cropbox-thumb'
 165                         },
 166                         {
 167                             tag : 'div',
 168                             cls : 'roo-upload-cropbox-empty-notify',
 169                             html : this.emptyText
 170                         },
 171                         {
 172                             tag : 'div',
 173                             cls : 'roo-upload-cropbox-error-notify alert alert-danger',
 174                             html : this.rotateNotify
 175                         }
 176                     ]
 177                 },
 178                 {
 179                     tag : 'div',
 180                     cls : 'roo-upload-cropbox-footer',
 181                     cn : {
 182                         tag : 'div',
 183                         cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
 184                         cn : []
 185                     }
 186                 }
 187             ]
 188         };
 189
 190         return cfg;
 191     },
 192
 193     onRender : function(ct, position)
 194     {
 195         Roo.bootstrap.UploadCropbox.superclass.onRender.call(this, ct, position);
 196
 197         if (this.buttons.length) {
 198
 199             Roo.each(this.buttons, function(bb) {
 200
 201                 var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
 202
 203                 btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
 204
 205             }, this);
 206         }
 207     },
 208
 209     initEvents : function()
 210     {
 211         this.urlAPI = (window.createObjectURL && window) ||
 212                                 (window.URL && URL.revokeObjectURL && URL) ||
 213                                 (window.webkitURL && webkitURL);
 214
 215         this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
 216         this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 217
 218         this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
 219         this.selectorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 220         this.selectorEl.hide();
 221
 222         this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
 223         this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 224
 225         this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
 226         this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 227         this.thumbEl.hide();
 228
 229         this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
 230         this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 231
 232         this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
 233         this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 234         this.errorEl.hide();
 235
 236         this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
 237         this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 238         this.footerEl.hide();
 239
 240         this.setThumbBoxSize();
 241
 242         this.bind();
 243
 244         this.resize();
 245
 246         this.fireEvent('initial', this);
 247     },
 248
 249     bind : function()
 250     {
 251         var _this = this;
 252
 253         window.addEventListener("resize", function() { _this.resize(); } );
 254
 255         this.bodyEl.on('click', this.beforeSelectFile, this);
 256
 257         if(Roo.isTouch){
 258             this.bodyEl.on('touchstart', this.onTouchStart, this);
 259             this.bodyEl.on('touchmove', this.onTouchMove, this);
 260             this.bodyEl.on('touchend', this.onTouchEnd, this);
 261         }
 262
 263         if(!Roo.isTouch){
 264             this.bodyEl.on('mousedown', this.onMouseDown, this);
 265             this.bodyEl.on('mousemove', this.onMouseMove, this);
 266             var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
 267             this.bodyEl.on(mousewheel, this.onMouseWheel, this);
 268             Roo.get(document).on('mouseup', this.onMouseUp, this);
 269         }
 270
 271         this.selectorEl.on('change', this.onFileSelected, this);
 272     },
 273
 274     reset : function()
 275     {
 276         this.scale = 0;
 277         this.baseScale = 1;
 278         this.rotate = 0;
 279         this.baseRotate = 1;
 280         this.dragable = false;
 281         this.pinching = false;
 282         this.mouseX = 0;
 283         this.mouseY = 0;
 284         this.cropData = false;
 285         this.notifyEl.dom.innerHTML = this.emptyText;
 286
 287     },
 288
 289     resize : function()
 290     {
 291         if(this.fireEvent('resize', this) != false){
 292             this.setThumbBoxPosition();
 293             this.setCanvasPosition();
 294         }
 295     },
 296
 297     onFooterButtonClick : function(e, el, o, type)
 298     {
 299         switch (type) {
 300             case 'rotate-left' :
 301                 this.onRotateLeft(e);
 302                 break;
 303             case 'rotate-right' :
 304                 this.onRotateRight(e);
 305                 break;
 306             case 'picture' :
 307                 this.beforeSelectFile(e);
 308                 break;
 309             case 'trash' :
 310                 this.trash(e);
 311                 break;
 312             case 'crop' :
 313                 this.crop(e);
 314                 break;
 315             case 'download' :
 316                 this.download(e);
 317                 break;
 318             default :
 319                 break;
 320         }
 321
 322         this.fireEvent('footerbuttonclick', this, type);
 323     },
 324
 325     beforeSelectFile : function(e)
 326     {
 327         e.preventDefault();
 328
 329         if(this.fireEvent('beforeselectfile', this) != false){
 330             this.selectorEl.dom.click();
 331         }
 332     },
 333
 334     onFileSelected : function(e)
 335     {
 336         e.preventDefault();
 337
 338         if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
 339             return;
 340         }
 341
 342         var file = this.selectorEl.dom.files[0];
 343
 344         if(this.fireEvent('inspect', this, file) != false){
 345             this.prepare(file);
 346         }
 347
 348     },
 349
 350     trash : function(e)
 351     {
 352         this.fireEvent('trash', this);
 353     },
 354
 355     download : function(e)
 356     {
 357         this.fireEvent('download', this);
 358     },
 359
 360     loadCanvas : function(src)
 361     {
 362         if(this.fireEvent('beforeloadcanvas', this, src) != false){
 363
 364             this.reset();
 365
 366             this.imageEl = document.createElement('img');
 367
 368             var _this = this;
 369
 370             this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
 371
 372             this.imageEl.src = src;
 373         }
 374     },
 375
 376     onLoadCanvas : function()
 377     {
 378         this.bodyEl.un('click', this.beforeSelectFile, this);
 379
 380         this.notifyEl.hide();
 381         this.thumbEl.show();
 382         this.footerEl.show();
 383
 384         this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
 385         this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
 386
 387         this.baseRotateLevel();
 388
 389         if(this.isDocument){
 390             this.setThumbBoxSize();
 391         }
 392
 393         this.setThumbBoxPosition();
 394
 395         this.baseScaleLevel();
 396
 397         this.draw();
 398
 399         this.resize();
 400
 401         this.canvasLoaded = true;
 402
 403     },
 404
 405     setCanvasPosition : function()
 406     {
 407         if(!this.canvasEl){
 408             return;
 409         }
 410
 411         var pw = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
 412         var ph = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
 413
 414         this.previewEl.setLeft(pw);
 415         this.previewEl.setTop(ph);
 416
 417     },
 418
 419     onMouseDown : function(e)
 420     {
 421         e.stopEvent();
 422
 423         this.dragable = true;
 424         this.pinching = false;
 425
 426         if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
 427             this.dragable = false;
 428             return;
 429         }
 430
 431         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
 432         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
 433
 434     },
 435
 436     onMouseMove : function(e)
 437     {
 438         e.stopEvent();
 439
 440         if(!this.canvasLoaded){
 441             return;
 442         }
 443
 444         if (!this.dragable){
 445             return;
 446         }
 447
 448         var minX = Math.ceil(this.thumbEl.getLeft(true));
 449         var minY = Math.ceil(this.thumbEl.getTop(true));
 450
 451         var maxX = Math.ceil(minX + this.thumbEl.getWidth() - this.canvasEl.width);
 452         var maxY = Math.ceil(minY + this.thumbEl.getHeight() - this.canvasEl.height);
 453
 454         var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
 455         var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
 456
 457         x = x - this.mouseX;
 458         y = y - this.mouseY;
 459
 460         var bgX = Math.ceil(x + this.previewEl.getLeft(true));
 461         var bgY = Math.ceil(y + this.previewEl.getTop(true));
 462
 463         bgX = (minX < bgX) ? minX : ((maxX > bgX) ? maxX : bgX);
 464         bgY = (minY < bgY) ? minY : ((maxY > bgY) ? maxY : bgY);
 465
 466         this.previewEl.setLeft(bgX);
 467         this.previewEl.setTop(bgY);
 468
 469         this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
 470         this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
 471     },
 472
 473     onMouseUp : function(e)
 474     {
 475         e.stopEvent();
 476
 477         this.dragable = false;
 478     },
 479
 480     onMouseWheel : function(e)
 481     {
 482         e.stopEvent();
 483
 484         this.startScale = this.scale;
 485
 486         this.scale = (e.getWheelDelta() == 1) ? (this.scale + 1) : (this.scale - 1);
 487
 488         if(!this.zoomable()){
 489             this.scale = this.startScale;
 490             return;
 491         }
 492
 493         this.draw();
 494
 495         return;
 496     },
 497
 498     zoomable : function()
 499     {
 500         var minScale = this.thumbEl.getWidth() / this.minWidth;
 501
 502         if(this.minWidth < this.minHeight){
 503             minScale = this.thumbEl.getHeight() / this.minHeight;
 504         }
 505
 506         var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
 507         var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
 508
 509         if(
 510                 this.isDocument &&
 511                 (this.rotate == 0 || this.rotate == 180) &&
 512                 (
 513                     width > this.imageEl.OriginWidth ||
 514                     height > this.imageEl.OriginHeight ||
 515                     (width < this.minWidth && height < this.minHeight)
 516                 )
 517         ){
 518             return false;
 519         }
 520
 521         if(
 522                 this.isDocument &&
 523                 (this.rotate == 90 || this.rotate == 270) &&
 524                 (
 525                     width > this.imageEl.OriginWidth ||
 526                     height > this.imageEl.OriginHeight ||
 527                     (width < this.minHeight && height < this.minWidth)
 528                 )
 529         ){
 530             return false;
 531         }
 532
 533         if(
 534                 !this.isDocument &&
 535                 (this.rotate == 0 || this.rotate == 180) &&
 536                 (
 537                     width < this.minWidth ||
 538                     width > this.imageEl.OriginWidth ||
 539                     height < this.minHeight ||
 540                     height > this.imageEl.OriginHeight
 541                 )
 542         ){
 543             return false;
 544         }
 545
 546         if(
 547                 !this.isDocument &&
 548                 (this.rotate == 90 || this.rotate == 270) &&
 549                 (
 550                     width < this.minHeight ||
 551                     width > this.imageEl.OriginWidth ||
 552                     height < this.minWidth ||
 553                     height > this.imageEl.OriginHeight
 554                 )
 555         ){
 556             return false;
 557         }
 558
 559         return true;
 560
 561     },
 562
 563     onRotateLeft : function(e)
 564     {
 565         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
 566
 567             var minScale = this.thumbEl.getWidth() / this.minWidth;
 568
 569             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
 570             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
 571
 572             this.startScale = this.scale;
 573
 574             while (this.getScaleLevel() < minScale){
 575
 576                 this.scale = this.scale + 1;
 577
 578                 if(!this.zoomable()){
 579                     break;
 580                 }
 581
 582                 if(
 583                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
 584                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
 585                 ){
 586                     continue;
 587                 }
 588
 589                 this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
 590
 591                 this.draw();
 592
 593                 return;
 594             }
 595
 596             this.scale = this.startScale;
 597
 598             this.onRotateFail();
 599
 600             return false;
 601         }
 602
 603         this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
 604
 605         if(this.isDocument){
 606             this.setThumbBoxSize();
 607             this.setThumbBoxPosition();
 608             this.setCanvasPosition();
 609         }
 610
 611         this.draw();
 612
 613         this.fireEvent('rotate', this, 'left');
 614
 615     },
 616
 617     onRotateRight : function(e)
 618     {
 619         if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
 620
 621             var minScale = this.thumbEl.getWidth() / this.minWidth;
 622
 623             var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
 624             var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
 625
 626             this.startScale = this.scale;
 627
 628             while (this.getScaleLevel() < minScale){
 629
 630                 this.scale = this.scale + 1;
 631
 632                 if(!this.zoomable()){
 633                     break;
 634                 }
 635
 636                 if(
 637                         Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
 638                         Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
 639                 ){
 640                     continue;
 641                 }
 642
 643                 this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
 644
 645                 this.draw();
 646
 647                 return;
 648             }
 649
 650             this.scale = this.startScale;
 651
 652             this.onRotateFail();
 653
 654             return false;
 655         }
 656
 657         this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
 658
 659         if(this.isDocument){
 660             this.setThumbBoxSize();
 661             this.setThumbBoxPosition();
 662             this.setCanvasPosition();
 663         }
 664
 665         this.draw();
 666
 667         this.fireEvent('rotate', this, 'right');
 668     },
 669
 670     onRotateFail : function()
 671     {
 672         this.errorEl.show(true);
 673
 674         var _this = this;
 675
 676         (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
 677     },
 678
 679     draw : function()
 680     {
 681         this.previewEl.dom.innerHTML = '';
 682
 683         var canvasEl = document.createElement("canvas");
 684
 685         var contextEl = canvasEl.getContext("2d");
 686
 687         canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
 688         canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
 689         var center = this.imageEl.OriginWidth / 2;
 690
 691         if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
 692             canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
 693             canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
 694             center = this.imageEl.OriginHeight / 2;
 695         }
 696
 697         contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
 698
 699         contextEl.translate(center, center);
 700         contextEl.rotate(this.rotate * Math.PI / 180);
 701
 702         contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
 703
 704         this.canvasEl = document.createElement("canvas");
 705
 706         this.contextEl = this.canvasEl.getContext("2d");
 707
 708         switch (this.rotate) {
 709             case 0 :
 710
 711                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
 712                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
 713
 714                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
 715
 716                 break;
 717             case 90 :
 718
 719                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
 720                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
 721
 722                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
 723                     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);
 724                     break;
 725                 }
 726
 727                 this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
 728
 729                 break;
 730             case 180 :
 731
 732                 this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
 733                 this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
 734
 735                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
 736                     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);
 737                     break;
 738                 }
 739
 740                 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);
 741
 742                 break;
 743             case 270 :
 744
 745                 this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
 746                 this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
 747
 748                 if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
 749                     this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
 750                     break;
 751                 }
 752
 753                 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);
 754
 755                 break;
 756             default :
 757                 break;
 758         }
 759
 760         this.previewEl.appendChild(this.canvasEl);
 761
 762         this.setCanvasPosition();
 763     },
 764
 765     crop : function()
 766     {
 767         if(!this.canvasLoaded){
 768             return;
 769         }
 770
 771         var imageCanvas = document.createElement("canvas");
 772
 773         var imageContext = imageCanvas.getContext("2d");
 774
 775         imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
 776         imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
 777
 778         var center = imageCanvas.width / 2;
 779
 780         imageContext.translate(center, center);
 781
 782         imageContext.rotate(this.rotate * Math.PI / 180);
 783
 784         imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
 785
 786         var canvas = document.createElement("canvas");
 787
 788         var context = canvas.getContext("2d");
 789
 790         canvas.width = this.minWidth;
 791         canvas.height = this.minHeight;
 792
 793         switch (this.rotate) {
 794             case 0 :
 795
 796                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
 797                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
 798
 799                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
 800                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
 801
 802                 var targetWidth = this.minWidth - 2 * x;
 803                 var targetHeight = this.minHeight - 2 * y;
 804
 805                 var scale = 1;
 806
 807                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
 808                     scale = targetWidth / width;
 809                 }
 810
 811                 if(x > 0 && y == 0){
 812                     scale = targetHeight / height;
 813                 }
 814
 815                 if(x > 0 && y > 0){
 816                     scale = targetWidth / width;
 817
 818                     if(width < height){
 819                         scale = targetHeight / height;
 820                     }
 821                 }
 822
 823                 context.scale(scale, scale);
 824
 825                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
 826                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
 827
 828                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
 829                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
 830
 831                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
 832
 833                 break;
 834             case 90 :
 835
 836                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
 837                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
 838
 839                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
 840                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
 841
 842                 var targetWidth = this.minWidth - 2 * x;
 843                 var targetHeight = this.minHeight - 2 * y;
 844
 845                 var scale = 1;
 846
 847                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
 848                     scale = targetWidth / width;
 849                 }
 850
 851                 if(x > 0 && y == 0){
 852                     scale = targetHeight / height;
 853                 }
 854
 855                 if(x > 0 && y > 0){
 856                     scale = targetWidth / width;
 857
 858                     if(width < height){
 859                         scale = targetHeight / height;
 860                     }
 861                 }
 862
 863                 context.scale(scale, scale);
 864
 865                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
 866                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
 867
 868                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
 869                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
 870
 871                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
 872
 873                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
 874
 875                 break;
 876             case 180 :
 877
 878                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
 879                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
 880
 881                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
 882                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
 883
 884                 var targetWidth = this.minWidth - 2 * x;
 885                 var targetHeight = this.minHeight - 2 * y;
 886
 887                 var scale = 1;
 888
 889                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
 890                     scale = targetWidth / width;
 891                 }
 892
 893                 if(x > 0 && y == 0){
 894                     scale = targetHeight / height;
 895                 }
 896
 897                 if(x > 0 && y > 0){
 898                     scale = targetWidth / width;
 899
 900                     if(width < height){
 901                         scale = targetHeight / height;
 902                     }
 903                 }
 904
 905                 context.scale(scale, scale);
 906
 907                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
 908                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
 909
 910                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
 911                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
 912
 913                 sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
 914                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
 915
 916                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
 917
 918                 break;
 919             case 270 :
 920
 921                 var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
 922                 var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
 923
 924                 var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
 925                 var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
 926
 927                 var targetWidth = this.minWidth - 2 * x;
 928                 var targetHeight = this.minHeight - 2 * y;
 929
 930                 var scale = 1;
 931
 932                 if((x == 0 && y == 0) || (x == 0 && y > 0)){
 933                     scale = targetWidth / width;
 934                 }
 935
 936                 if(x > 0 && y == 0){
 937                     scale = targetHeight / height;
 938                 }
 939
 940                 if(x > 0 && y > 0){
 941                     scale = targetWidth / width;
 942
 943                     if(width < height){
 944                         scale = targetHeight / height;
 945                     }
 946                 }
 947
 948                 context.scale(scale, scale);
 949
 950                 var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
 951                 var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
 952
 953                 sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
 954                 sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
 955
 956                 sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
 957
 958                 context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
 959
 960                 break;
 961             default :
 962                 break;
 963         }
 964
 965         this.cropData = canvas.toDataURL(this.cropType);
 966
 967         this.fireEvent('crop', this, this.cropData);
 968
 969         return;
 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(this.file.id) != 'undefined' && this.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 });