git.roojs.org Git - roojs1/blob - docs/symbols/src/Roo_bootstrap_UploadCropbox.js.html

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