Otaku-Projects / AngularJS-CRUD-PHP

(function() {

'use strict';

var crop = angular.module('ngImgCrop', []);

crop.factory('cropAreaCircle', ['cropArea', function(CropArea) {

  var CropAreaCircle = function() {

    CropArea.apply(this, arguments);

    this._boxResizeBaseSize = 20;

    this._boxResizeNormalRatio = 0.9;

    this._boxResizeHoverRatio = 1.2;

    this._iconMoveNormalRatio = 0.9;

    this._iconMoveHoverRatio = 1.2;

    this._boxResizeNormalSize = this._boxResizeBaseSize*this._boxResizeNormalRatio;

    this._boxResizeHoverSize = this._boxResizeBaseSize*this._boxResizeHoverRatio;

    this._posDragStartX=0;

    this._posDragStartY=0;

    this._posResizeStartX=0;

    this._posResizeStartY=0;

    this._posResizeStartSize=0;

    this._boxResizeIsHover = false;

    this._areaIsHover = false;

    this._boxResizeIsDragging = false;

    this._areaIsDragging = false;

  };

  CropAreaCircle.prototype = new CropArea();

  CropAreaCircle.prototype._calcCirclePerimeterCoords=function(angleDegrees) {

    var hSize=this._size/2;

    var angleRadians=angleDegrees * (Math.PI / 180),

        circlePerimeterX=this._x + hSize * Math.cos(angleRadians),

        circlePerimeterY=this._y + hSize * Math.sin(angleRadians);

    return [circlePerimeterX, circlePerimeterY];

  };

  CropAreaCircle.prototype._calcResizeIconCenterCoords=function() {

    return this._calcCirclePerimeterCoords(-45);

  };

  CropAreaCircle.prototype._isCoordWithinArea=function(coord) {

    return Math.sqrt((coord[0]-this._x)*(coord[0]-this._x) + (coord[1]-this._y)*(coord[1]-this._y)) < this._size/2;

  };

  CropAreaCircle.prototype._isCoordWithinBoxResize=function(coord) {

    var resizeIconCenterCoords=this._calcResizeIconCenterCoords();

    var hSize=this._boxResizeHoverSize/2;

    return(coord[0] > resizeIconCenterCoords[0] - hSize && coord[0] < resizeIconCenterCoords[0] + hSize &&

           coord[1] > resizeIconCenterCoords[1] - hSize && coord[1] < resizeIconCenterCoords[1] + hSize);

  };

  CropAreaCircle.prototype._drawArea=function(ctx,centerCoords,size){

    ctx.arc(centerCoords[0],centerCoords[1],size/2,0,2*Math.PI);

  };

  CropAreaCircle.prototype.draw=function() {

    CropArea.prototype.draw.apply(this, arguments);

    // draw move icon

    this._cropCanvas.drawIconMove([this._x,this._y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio);

    // draw resize cubes

    this._cropCanvas.drawIconResizeBoxNESW(this._calcResizeIconCenterCoords(), this._boxResizeBaseSize, this._boxResizeIsHover?this._boxResizeHoverRatio:this._boxResizeNormalRatio);

  };

  CropAreaCircle.prototype.processMouseMove=function(mouseCurX, mouseCurY) {

    var cursor='default';

    var res=false;

    this._boxResizeIsHover = false;

    this._areaIsHover = false;

    if (this._areaIsDragging) {

      this._x = mouseCurX - this._posDragStartX;

      this._y = mouseCurY - this._posDragStartY;

      this._areaIsHover = true;

      cursor='move';

      res=true;

      this._events.trigger('area-move');

    } else if (this._boxResizeIsDragging) {

        cursor = 'nesw-resize';

        var iFR, iFX, iFY;

        iFX = mouseCurX - this._posResizeStartX;

        iFY = this._posResizeStartY - mouseCurY;

        if(iFX>iFY) {

          iFR = this._posResizeStartSize + iFY*2;

        } else {

          iFR = this._posResizeStartSize + iFX*2;

        }

        this._size = Math.max(this._minSize, iFR);

        this._boxResizeIsHover = true;

        res=true;

        this._events.trigger('area-resize');

    } else if (this._isCoordWithinBoxResize([mouseCurX,mouseCurY])) {

        cursor = 'nesw-resize';

        this._areaIsHover = false;

        this._boxResizeIsHover = true;

        res=true;

    } else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {

        cursor = 'move';

        this._areaIsHover = true;

        res=true;

    }

    this._dontDragOutside();

    angular.element(this._ctx.canvas).css({'cursor': cursor});

    return res;

  };

  CropAreaCircle.prototype.processMouseDown=function(mouseDownX, mouseDownY) {

    if (this._isCoordWithinBoxResize([mouseDownX,mouseDownY])) {

      this._areaIsDragging = false;

      this._areaIsHover = false;

      this._boxResizeIsDragging = true;

      this._boxResizeIsHover = true;

      this._posResizeStartX=mouseDownX;

      this._posResizeStartY=mouseDownY;

      this._posResizeStartSize = this._size;

      this._events.trigger('area-resize-start');

    } else if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {

      this._areaIsDragging = true;

      this._areaIsHover = true;

      this._boxResizeIsDragging = false;

      this._boxResizeIsHover = false;

      this._posDragStartX = mouseDownX - this._x;

      this._posDragStartY = mouseDownY - this._y;

      this._events.trigger('area-move-start');

    }

  };

  CropAreaCircle.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) {

    if(this._areaIsDragging) {

      this._areaIsDragging = false;

      this._events.trigger('area-move-end');

    }

    if(this._boxResizeIsDragging) {

      this._boxResizeIsDragging = false;

      this._events.trigger('area-resize-end');

    }

    this._areaIsHover = false;

    this._boxResizeIsHover = false;

    this._posDragStartX = 0;

    this._posDragStartY = 0;

  };

  return CropAreaCircle;

}]);

crop.factory('cropAreaSquare', ['cropArea', function(CropArea) {

  var CropAreaSquare = function() {

    CropArea.apply(this, arguments);

    this._resizeCtrlBaseRadius = 10;

    this._resizeCtrlNormalRatio = 0.75;

    this._resizeCtrlHoverRatio = 1;

    this._iconMoveNormalRatio = 0.9;

    this._iconMoveHoverRatio = 1.2;

    this._resizeCtrlNormalRadius = this._resizeCtrlBaseRadius*this._resizeCtrlNormalRatio;

    this._resizeCtrlHoverRadius = this._resizeCtrlBaseRadius*this._resizeCtrlHoverRatio;

    this._posDragStartX=0;

    this._posDragStartY=0;

    this._posResizeStartX=0;

    this._posResizeStartY=0;

    this._posResizeStartSize=0;

    this._resizeCtrlIsHover = -1;

    this._areaIsHover = false;

    this._resizeCtrlIsDragging = -1;

    this._areaIsDragging = false;

  };

  CropAreaSquare.prototype = new CropArea();

  CropAreaSquare.prototype._calcSquareCorners=function() {

    var hSize=this._size/2;

    return [

      [this._x-hSize, this._y-hSize],

      [this._x+hSize, this._y-hSize],

      [this._x-hSize, this._y+hSize],

      [this._x+hSize, this._y+hSize]

    ];

  };

  CropAreaSquare.prototype._calcSquareDimensions=function() {

    var hSize=this._size/2;

    return {

      left: this._x-hSize,

      top: this._y-hSize,

      right: this._x+hSize,

      bottom: this._y+hSize

    };

  };

  CropAreaSquare.prototype._isCoordWithinArea=function(coord) {

    var squareDimensions=this._calcSquareDimensions();

    return (coord[0]>=squareDimensions.left&&coord[0]<=squareDimensions.right&&coord[1]>=squareDimensions.top&&coord[1]<=squareDimensions.bottom);

  };

  CropAreaSquare.prototype._isCoordWithinResizeCtrl=function(coord) {

    var resizeIconsCenterCoords=this._calcSquareCorners();

    var res=-1;

    for(var i=0,len=resizeIconsCenterCoords.length;i<len;i++) {

      var resizeIconCenterCoords=resizeIconsCenterCoords[i];

      if(coord[0] > resizeIconCenterCoords[0] - this._resizeCtrlHoverRadius && coord[0] < resizeIconCenterCoords[0] + this._resizeCtrlHoverRadius &&

         coord[1] > resizeIconCenterCoords[1] - this._resizeCtrlHoverRadius && coord[1] < resizeIconCenterCoords[1] + this._resizeCtrlHoverRadius) {

        res=i;

        break;

      }

    }

    return res;

  };

  CropAreaSquare.prototype._drawArea=function(ctx,centerCoords,size){

    var hSize=size/2;

    ctx.rect(centerCoords[0]-hSize,centerCoords[1]-hSize,size,size);

  };

  CropAreaSquare.prototype.draw=function() {

    CropArea.prototype.draw.apply(this, arguments);

    // draw move icon

    this._cropCanvas.drawIconMove([this._x,this._y], this._areaIsHover?this._iconMoveHoverRatio:this._iconMoveNormalRatio);

    // draw resize cubes

    var resizeIconsCenterCoords=this._calcSquareCorners();

    for(var i=0,len=resizeIconsCenterCoords.length;i<len;i++) {

      var resizeIconCenterCoords=resizeIconsCenterCoords[i];

      this._cropCanvas.drawIconResizeCircle(resizeIconCenterCoords, this._resizeCtrlBaseRadius, this._resizeCtrlIsHover===i?this._resizeCtrlHoverRatio:this._resizeCtrlNormalRatio);

    }

  };

  CropAreaSquare.prototype.processMouseMove=function(mouseCurX, mouseCurY) {

    var cursor='default';

    var res=false;

    this._resizeCtrlIsHover = -1;

    this._areaIsHover = false;

    if (this._areaIsDragging) {

      this._x = mouseCurX - this._posDragStartX;

      this._y = mouseCurY - this._posDragStartY;

      this._areaIsHover = true;

      cursor='move';

      res=true;

      this._events.trigger('area-move');

    } else if (this._resizeCtrlIsDragging>-1) {

      var xMulti, yMulti;

      switch(this._resizeCtrlIsDragging) {

        case 0: // Top Left

          xMulti=-1;

          yMulti=-1;

          cursor = 'nwse-resize';

          break;

        case 1: // Top Right

          xMulti=1;

          yMulti=-1;

          cursor = 'nesw-resize';

          break;

        case 2: // Bottom Left

          xMulti=-1;

          yMulti=1;

          cursor = 'nesw-resize';

          break;

        case 3: // Bottom Right

          xMulti=1;

          yMulti=1;

          cursor = 'nwse-resize';

          break;

      }

      var iFX = (mouseCurX - this._posResizeStartX)*xMulti;

      var iFY = (mouseCurY - this._posResizeStartY)*yMulti;

      var iFR;

      if(iFX>iFY) {

        iFR = this._posResizeStartSize + iFY;

      } else {

        iFR = this._posResizeStartSize + iFX;

      }

      var wasSize=this._size;

      this._size = Math.max(this._minSize, iFR);

      var posModifier=(this._size-wasSize)/2;

      this._x+=posModifier*xMulti;

      this._y+=posModifier*yMulti;

      this._resizeCtrlIsHover = this._resizeCtrlIsDragging;

      res=true;

      this._events.trigger('area-resize');

    } else {

      var hoveredResizeBox=this._isCoordWithinResizeCtrl([mouseCurX,mouseCurY]);

      if (hoveredResizeBox>-1) {

        switch(hoveredResizeBox) {

          case 0:

            cursor = 'nwse-resize';

            break;

          case 1:

            cursor = 'nesw-resize';

            break;

          case 2:

            cursor = 'nesw-resize';

            break;

          case 3:

            cursor = 'nwse-resize';

            break;

        }

        this._areaIsHover = false;

        this._resizeCtrlIsHover = hoveredResizeBox;

        res=true;

      } else if(this._isCoordWithinArea([mouseCurX,mouseCurY])) {

        cursor = 'move';

        this._areaIsHover = true;

        res=true;

      }

    }

    this._dontDragOutside();

    angular.element(this._ctx.canvas).css({'cursor': cursor});

    return res;

  };

  CropAreaSquare.prototype.processMouseDown=function(mouseDownX, mouseDownY) {

    var isWithinResizeCtrl=this._isCoordWithinResizeCtrl([mouseDownX,mouseDownY]);

    if (isWithinResizeCtrl>-1) {

      this._areaIsDragging = false;

      this._areaIsHover = false;

      this._resizeCtrlIsDragging = isWithinResizeCtrl;

      this._resizeCtrlIsHover = isWithinResizeCtrl;

      this._posResizeStartX=mouseDownX;

      this._posResizeStartY=mouseDownY;

      this._posResizeStartSize = this._size;

      this._events.trigger('area-resize-start');

    } else if (this._isCoordWithinArea([mouseDownX,mouseDownY])) {

      this._areaIsDragging = true;

      this._areaIsHover = true;

      this._resizeCtrlIsDragging = -1;

      this._resizeCtrlIsHover = -1;

      this._posDragStartX = mouseDownX - this._x;

      this._posDragStartY = mouseDownY - this._y;

      this._events.trigger('area-move-start');

    }

  };

  CropAreaSquare.prototype.processMouseUp=function(/*mouseUpX, mouseUpY*/) {

    if(this._areaIsDragging) {

      this._areaIsDragging = false;

      this._events.trigger('area-move-end');

    }

    if(this._resizeCtrlIsDragging>-1) {

      this._resizeCtrlIsDragging = -1;

      this._events.trigger('area-resize-end');

    }

    this._areaIsHover = false;

    this._resizeCtrlIsHover = -1;

    this._posDragStartX = 0;

    this._posDragStartY = 0;

  };

  return CropAreaSquare;

}]);

crop.factory('cropArea', ['cropCanvas', function(CropCanvas) {

  var CropArea = function(ctx, events) {

    this._ctx=ctx;

    this._events=events;

    this._minSize=80;

    this._cropCanvas=new CropCanvas(ctx);

    this._image=new Image();

    this._x = 0;

    this._y = 0;

    this._size = 200;

  };

  /* GETTERS/SETTERS */

  CropArea.prototype.getImage = function () {

    return this._image;

  };

  CropArea.prototype.setImage = function (image) {

    this._image = image;

  };

  CropArea.prototype.getX = function () {

    return this._x;

  };

  CropArea.prototype.setX = function (x) {

    this._x = x;

    this._dontDragOutside();

  };

  CropArea.prototype.getY = function () {

    return this._y;

  };

  CropArea.prototype.setY = function (y) {

    this._y = y;

    this._dontDragOutside();

  };

  CropArea.prototype.getSize = function () {

    return this._size;

  };

  CropArea.prototype.setSize = function (size) {

    this._size = Math.max(this._minSize, size);

    this._dontDragOutside();

  };

  CropArea.prototype.getMinSize = function () {

    return this._minSize;

  };

  CropArea.prototype.setMinSize = function (size) {

    this._minSize = size;

    this._size = Math.max(this._minSize, this._size);

    this._dontDragOutside();

  };

  /* FUNCTIONS */

  CropArea.prototype._dontDragOutside=function() {

    var h=this._ctx.canvas.height,

        w=this._ctx.canvas.width;

    if(this._size>w) { this._size=w; }

    if(this._size>h) { this._size=h; }

    if(this._x<this._size/2) { this._x=this._size/2; }

    if(this._x>w-this._size/2) { this._x=w-this._size/2; }

    if(this._y<this._size/2) { this._y=this._size/2; }

    if(this._y>h-this._size/2) { this._y=h-this._size/2; }

  };

  CropArea.prototype._drawArea=function() {};

  CropArea.prototype.draw=function() {

    // draw crop area

    this._cropCanvas.drawCropArea(this._image,[this._x,this._y],this._size,this._drawArea);

  };

  CropArea.prototype.processMouseMove=function() {};

  CropArea.prototype.processMouseDown=function() {};

  CropArea.prototype.processMouseUp=function() {};

  return CropArea;

}]);

crop.factory('cropCanvas', [function() {

  // Shape = Array of [x,y]; [0, 0] - center

  var shapeArrowNW=[[-0.5,-2],[-3,-4.5],[-0.5,-7],[-7,-7],[-7,-0.5],[-4.5,-3],[-2,-0.5]];

  var shapeArrowNE=[[0.5,-2],[3,-4.5],[0.5,-7],[7,-7],[7,-0.5],[4.5,-3],[2,-0.5]];

  var shapeArrowSW=[[-0.5,2],[-3,4.5],[-0.5,7],[-7,7],[-7,0.5],[-4.5,3],[-2,0.5]];

  var shapeArrowSE=[[0.5,2],[3,4.5],[0.5,7],[7,7],[7,0.5],[4.5,3],[2,0.5]];

  var shapeArrowN=[[-1.5,-2.5],[-1.5,-6],[-5,-6],[0,-11],[5,-6],[1.5,-6],[1.5,-2.5]];

  var shapeArrowW=[[-2.5,-1.5],[-6,-1.5],[-6,-5],[-11,0],[-6,5],[-6,1.5],[-2.5,1.5]];

  var shapeArrowS=[[-1.5,2.5],[-1.5,6],[-5,6],[0,11],[5,6],[1.5,6],[1.5,2.5]];

  var shapeArrowE=[[2.5,-1.5],[6,-1.5],[6,-5],[11,0],[6,5],[6,1.5],[2.5,1.5]];

  // Colors

  var colors={

    areaOutline: '#fff',

    resizeBoxStroke: '#fff',

    resizeBoxFill: '#444',

    resizeBoxArrowFill: '#fff',

    resizeCircleStroke: '#fff',

    resizeCircleFill: '#444',

    moveIconFill: '#fff'

  };

  return function(ctx){

    /* Base functions */

    // Calculate Point

    var calcPoint=function(point,offset,scale) {

        return [scale*point[0]+offset[0], scale*point[1]+offset[1]];

    };

    // Draw Filled Polygon

    var drawFilledPolygon=function(shape,fillStyle,centerCoords,scale) {

        ctx.save();

        ctx.fillStyle = fillStyle;

        ctx.beginPath();

        var pc, pc0=calcPoint(shape[0],centerCoords,scale);

        ctx.moveTo(pc0[0],pc0[1]);

            if (p > 0) {

                pc=calcPoint(shape[p],centerCoords,scale);

                ctx.lineTo(pc[0],pc[1]);

            }

        }

        ctx.lineTo(pc0[0],pc0[1]);

        ctx.fill();

        ctx.closePath();

        ctx.restore();

    };

    /* Icons */

    this.drawIconMove=function(centerCoords, scale) {

      drawFilledPolygon(shapeArrowN, colors.moveIconFill, centerCoords, scale);

      drawFilledPolygon(shapeArrowW, colors.moveIconFill, centerCoords, scale);

      drawFilledPolygon(shapeArrowS, colors.moveIconFill, centerCoords, scale);

      drawFilledPolygon(shapeArrowE, colors.moveIconFill, centerCoords, scale);

    };

    this.drawIconResizeCircle=function(centerCoords, circleRadius, scale) {

      var scaledCircleRadius=circleRadius*scale;

      ctx.save();

      ctx.strokeStyle = colors.resizeCircleStroke;

      ctx.lineWidth = 2;

      ctx.fillStyle = colors.resizeCircleFill;

      ctx.beginPath();

      ctx.arc(centerCoords[0],centerCoords[1],scaledCircleRadius,0,2*Math.PI);

      ctx.fill();

      ctx.stroke();

      ctx.closePath();

      ctx.restore();

    };

    this.drawIconResizeBoxBase=function(centerCoords, boxSize, scale) {

      var scaledBoxSize=boxSize*scale;

      ctx.save();

      ctx.strokeStyle = colors.resizeBoxStroke;

      ctx.lineWidth = 2;

      ctx.fillStyle = colors.resizeBoxFill;

      ctx.fillRect(centerCoords[0] - scaledBoxSize/2, centerCoords[1] - scaledBoxSize/2, scaledBoxSize, scaledBoxSize);

      ctx.strokeRect(centerCoords[0] - scaledBoxSize/2, centerCoords[1] - scaledBoxSize/2, scaledBoxSize, scaledBoxSize);

      ctx.restore();

    };

    this.drawIconResizeBoxNESW=function(centerCoords, boxSize, scale) {

      this.drawIconResizeBoxBase(centerCoords, boxSize, scale);

      drawFilledPolygon(shapeArrowNE, colors.resizeBoxArrowFill, centerCoords, scale);

      drawFilledPolygon(shapeArrowSW, colors.resizeBoxArrowFill, centerCoords, scale);

    };

    this.drawIconResizeBoxNWSE=function(centerCoords, boxSize, scale) {

      this.drawIconResizeBoxBase(centerCoords, boxSize, scale);

      drawFilledPolygon(shapeArrowNW, colors.resizeBoxArrowFill, centerCoords, scale);

      drawFilledPolygon(shapeArrowSE, colors.resizeBoxArrowFill, centerCoords, scale);

    };

    /* Crop Area */

    this.drawCropArea=function(image, centerCoords, size, fnDrawClipPath) {

      var xRatio=image.width/ctx.canvas.width,

          yRatio=image.height/ctx.canvas.height,

          xLeft=centerCoords[0]-size/2,

          yTop=centerCoords[1]-size/2;

      ctx.save();

      ctx.strokeStyle = colors.areaOutline;

      ctx.lineWidth = 2;

      ctx.beginPath();

      fnDrawClipPath(ctx, centerCoords, size);

      ctx.stroke();

      ctx.clip();

      // draw part of original image

      if (size > 0) {

          ctx.drawImage(image, xLeft*xRatio, yTop*yRatio, size*xRatio, size*yRatio, xLeft, yTop, size, size);

      }

      ctx.beginPath();

      fnDrawClipPath(ctx, centerCoords, size);

      ctx.stroke();

      ctx.clip();

      ctx.restore();

    };

  };

}]);

/**

 * EXIF service is based on the exif-js library (https://github.com/jseidelin/exif-js)

 */

crop.service('cropEXIF', [function() {

  var debug = false;

  var ExifTags = this.Tags = {

      // version tags

      0x9000 : "ExifVersion",             // EXIF version

      0xA000 : "FlashpixVersion",         // Flashpix format version

      // colorspace tags

      0xA001 : "ColorSpace",              // Color space information tag

      // image configuration

      0xA002 : "PixelXDimension",         // Valid width of meaningful image

      0xA003 : "PixelYDimension",         // Valid height of meaningful image

      0x9101 : "ComponentsConfiguration", // Information about channels

      0x9102 : "CompressedBitsPerPixel",  // Compressed bits per pixel

      // user information

      0x927C : "MakerNote",               // Any desired information written by the manufacturer

      0x9286 : "UserComment",             // Comments by user

      // related file

      0xA004 : "RelatedSoundFile",        // Name of related sound file

      // date and time

      0x9003 : "DateTimeOriginal",        // Date and time when the original image was generated

      0x9004 : "DateTimeDigitized",       // Date and time when the image was stored digitally

      0x9290 : "SubsecTime",              // Fractions of seconds for DateTime

      0x9291 : "SubsecTimeOriginal",      // Fractions of seconds for DateTimeOriginal

      0x9292 : "SubsecTimeDigitized",     // Fractions of seconds for DateTimeDigitized

      // picture-taking conditions

      0x829A : "ExposureTime",            // Exposure time (in seconds)

      0x829D : "FNumber",                 // F number

      0x8822 : "ExposureProgram",         // Exposure program

      0x8824 : "SpectralSensitivity",     // Spectral sensitivity

      0x8827 : "ISOSpeedRatings",         // ISO speed rating

      0x8828 : "OECF",                    // Optoelectric conversion factor

      0x9201 : "ShutterSpeedValue",       // Shutter speed

      0x9202 : "ApertureValue",           // Lens aperture

      0x9203 : "BrightnessValue",         // Value of brightness

      0x9204 : "ExposureBias",            // Exposure bias

      0x9205 : "MaxApertureValue",        // Smallest F number of lens

      0x9206 : "SubjectDistance",         // Distance to subject in meters

      0x9207 : "MeteringMode",            // Metering mode

      0x9208 : "LightSource",             // Kind of light source

      0x9209 : "Flash",                   // Flash status

      0x9214 : "SubjectArea",             // Location and area of main subject

      0x920A : "FocalLength",             // Focal length of the lens in mm

      0xA20B : "FlashEnergy",             // Strobe energy in BCPS

      0xA20C : "SpatialFrequencyResponse",    //

      0xA20E : "FocalPlaneXResolution",   // Number of pixels in width direction per FocalPlaneResolutionUnit

      0xA20F : "FocalPlaneYResolution",   // Number of pixels in height direction per FocalPlaneResolutionUnit

      0xA210 : "FocalPlaneResolutionUnit",    // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution

      0xA214 : "SubjectLocation",         // Location of subject in image

      0xA215 : "ExposureIndex",           // Exposure index selected on camera

      0xA217 : "SensingMethod",           // Image sensor type

      0xA300 : "FileSource",              // Image source (3 == DSC)

      0xA301 : "SceneType",               // Scene type (1 == directly photographed)

      0xA302 : "CFAPattern",              // Color filter array geometric pattern

      0xA401 : "CustomRendered",          // Special processing

      0xA402 : "ExposureMode",            // Exposure mode

      0xA403 : "WhiteBalance",            // 1 = auto white balance, 2 = manual

      0xA404 : "DigitalZoomRation",       // Digital zoom ratio

      0xA405 : "FocalLengthIn35mmFilm",   // Equivalent foacl length assuming 35mm film camera (in mm)

      0xA406 : "SceneCaptureType",        // Type of scene

      0xA407 : "GainControl",             // Degree of overall image gain adjustment

      0xA408 : "Contrast",                // Direction of contrast processing applied by camera

      0xA409 : "Saturation",              // Direction of saturation processing applied by camera

      0xA40A : "Sharpness",               // Direction of sharpness processing applied by camera

      0xA40B : "DeviceSettingDescription",    //

      0xA40C : "SubjectDistanceRange",    // Distance to subject

      // other tags

      0xA005 : "InteroperabilityIFDPointer",

      0xA420 : "ImageUniqueID"            // Identifier assigned uniquely to each image

  };

  var TiffTags = this.TiffTags = {

      0x0100 : "ImageWidth",

      0x0101 : "ImageHeight",

      0x8769 : "ExifIFDPointer",

      0x8825 : "GPSInfoIFDPointer",

      0xA005 : "InteroperabilityIFDPointer",

      0x0102 : "BitsPerSample",

      0x0103 : "Compression",

      0x0106 : "PhotometricInterpretation",

      0x0112 : "Orientation",

      0x0115 : "SamplesPerPixel",

      0x011C : "PlanarConfiguration",

      0x0212 : "YCbCrSubSampling",

      0x0213 : "YCbCrPositioning",

      0x011A : "XResolution",

      0x011B : "YResolution",

      0x0128 : "ResolutionUnit",

      0x0111 : "StripOffsets",

      0x0116 : "RowsPerStrip",

      0x0117 : "StripByteCounts",

      0x0201 : "JPEGInterchangeFormat",

      0x0202 : "JPEGInterchangeFormatLength",

      0x012D : "TransferFunction",

      0x013E : "WhitePoint",

      0x013F : "PrimaryChromaticities",

      0x0211 : "YCbCrCoefficients",

      0x0214 : "ReferenceBlackWhite",

      0x0132 : "DateTime",

      0x010E : "ImageDescription",

      0x010F : "Make",

      0x0110 : "Model",

      0x0131 : "Software",

      0x013B : "Artist",

      0x8298 : "Copyright"

  };

  var GPSTags = this.GPSTags = {

      0x0000 : "GPSVersionID",

      0x0001 : "GPSLatitudeRef",

      0x0002 : "GPSLatitude",

      0x0003 : "GPSLongitudeRef",

      0x0004 : "GPSLongitude",

      0x0005 : "GPSAltitudeRef",

      0x0006 : "GPSAltitude",

      0x0007 : "GPSTimeStamp",

      0x0008 : "GPSSatellites",

      0x0009 : "GPSStatus",

      0x000A : "GPSMeasureMode",

      0x000B : "GPSDOP",

      0x000C : "GPSSpeedRef",

      0x000D : "GPSSpeed",

      0x000E : "GPSTrackRef",

      0x000F : "GPSTrack",

      0x0010 : "GPSImgDirectionRef",

      0x0011 : "GPSImgDirection",

      0x0012 : "GPSMapDatum",

      0x0013 : "GPSDestLatitudeRef",

      0x0014 : "GPSDestLatitude",

      0x0015 : "GPSDestLongitudeRef",

      0x0016 : "GPSDestLongitude",

      0x0017 : "GPSDestBearingRef",

      0x0018 : "GPSDestBearing",

      0x0019 : "GPSDestDistanceRef",

      0x001A : "GPSDestDistance",

      0x001B : "GPSProcessingMethod",

      0x001C : "GPSAreaInformation",

      0x001D : "GPSDateStamp",

      0x001E : "GPSDifferential"

  };

  var StringValues = this.StringValues = {

      ExposureProgram : {

          0 : "Not defined",

          1 : "Manual",

          2 : "Normal program",

          3 : "Aperture priority",

          4 : "Shutter priority",

          5 : "Creative program",

          6 : "Action program",

          7 : "Portrait mode",

          8 : "Landscape mode"

      },

      MeteringMode : {

          0 : "Unknown",

          1 : "Average",

          2 : "CenterWeightedAverage",

          3 : "Spot",

          4 : "MultiSpot",

          5 : "Pattern",

          6 : "Partial",

          255 : "Other"

      },

      LightSource : {

          0 : "Unknown",

          1 : "Daylight",

          2 : "Fluorescent",

          3 : "Tungsten (incandescent light)",

          4 : "Flash",

          9 : "Fine weather",

          10 : "Cloudy weather",

          11 : "Shade",

          12 : "Daylight fluorescent (D 5700 - 7100K)",

          13 : "Day white fluorescent (N 4600 - 5400K)",

          14 : "Cool white fluorescent (W 3900 - 4500K)",

          15 : "White fluorescent (WW 3200 - 3700K)",

          17 : "Standard light A",

          18 : "Standard light B",

          19 : "Standard light C",

          20 : "D55",

          21 : "D65",

          22 : "D75",

          23 : "D50",

          24 : "ISO studio tungsten",

          255 : "Other"

      },

      Flash : {

          0x0000 : "Flash did not fire",

          0x0001 : "Flash fired",

          0x0005 : "Strobe return light not detected",

          0x0007 : "Strobe return light detected",

          0x0009 : "Flash fired, compulsory flash mode",

          0x000D : "Flash fired, compulsory flash mode, return light not detected",

          0x000F : "Flash fired, compulsory flash mode, return light detected",

          0x0010 : "Flash did not fire, compulsory flash mode",

          0x0018 : "Flash did not fire, auto mode",

          0x0019 : "Flash fired, auto mode",

          0x001D : "Flash fired, auto mode, return light not detected",

          0x001F : "Flash fired, auto mode, return light detected",

          0x0020 : "No flash function",

          0x0041 : "Flash fired, red-eye reduction mode",

          0x0045 : "Flash fired, red-eye reduction mode, return light not detected",

          0x0047 : "Flash fired, red-eye reduction mode, return light detected",

          0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode",

          0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",

          0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",

          0x0059 : "Flash fired, auto mode, red-eye reduction mode",

          0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode",

          0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode"

      },

      SensingMethod : {

          1 : "Not defined",

          2 : "One-chip color area sensor",

          3 : "Two-chip color area sensor",

          4 : "Three-chip color area sensor",

          5 : "Color sequential area sensor",

          7 : "Trilinear sensor",

          8 : "Color sequential linear sensor"

      },

      SceneCaptureType : {

          0 : "Standard",

          1 : "Landscape",

          2 : "Portrait",

          3 : "Night scene"

      },

      SceneType : {

          1 : "Directly photographed"

      },

      CustomRendered : {

          0 : "Normal process",

          1 : "Custom process"

      },

      WhiteBalance : {

          0 : "Auto white balance",

          1 : "Manual white balance"

      },

      GainControl : {

          0 : "None",

          1 : "Low gain up",

          2 : "High gain up",

          3 : "Low gain down",

          4 : "High gain down"

      },

      Contrast : {

          0 : "Normal",

          1 : "Soft",

          2 : "Hard"

      },

      Saturation : {

          0 : "Normal",

          1 : "Low saturation",

          2 : "High saturation"

      },

      Sharpness : {

          0 : "Normal",

          1 : "Soft",

          2 : "Hard"

      },

      SubjectDistanceRange : {

          0 : "Unknown",

          1 : "Macro",

          2 : "Close view",

          3 : "Distant view"

      },

      FileSource : {

          3 : "DSC"

      },

      Components : {

          0 : "",

          1 : "Y",

          2 : "Cb",

          3 : "Cr",

          4 : "R",

          5 : "G",

          6 : "B"

      }

  };

      if (element.addEventListener) {

          element.addEventListener(event, handler, false);

      } else if (element.attachEvent) {

          element.attachEvent("on" + event, handler);

      }

  }

  function imageHasData(img) {

      return !!(img.exifdata);

  }

  function base64ToArrayBuffer(base64, contentType) {

      contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg'

      base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');

      var binary = atob(base64);

      var len = binary.length;

      var buffer = new ArrayBuffer(len);

      var view = new Uint8Array(buffer);

      for (var i = 0; i < len; i++) {

          view[i] = binary.charCodeAt(i);

      }

      return buffer;

  }

  function objectURLToBlob(url, callback) {

      var http = new XMLHttpRequest();

      http.open("GET", url, true);

      http.responseType = "blob";

      http.onload = function(e) {

          if (this.status == 200 || this.status === 0) {

              callback(this.response);

          }

      };

      http.send();

  }

  function getImageData(img, callback) {

      function handleBinaryFile(binFile) {

          var data = findEXIFinJPEG(binFile);

          var iptcdata = findIPTCinJPEG(binFile);

          img.exifdata = data || {};

          img.iptcdata = iptcdata || {};

          if (callback) {

              callback.call(img);

          }

      }

      if (img.src) {

          if (/^data\:/i.test(img.src)) { // Data URI

              var arrayBuffer = base64ToArrayBuffer(img.src);

              handleBinaryFile(arrayBuffer);

          } else if (/^blob\:/i.test(img.src)) { // Object URL

              var fileReader = new FileReader();

              fileReader.onload = function(e) {

                  handleBinaryFile(e.target.result);

              };

              objectURLToBlob(img.src, function (blob) {

                  fileReader.readAsArrayBuffer(blob);

              });

          } else {

              var http = new XMLHttpRequest();

              http.onload = function() {

                  if (this.status == 200 || this.status === 0) {

                      handleBinaryFile(http.response);

                  } else {

                      throw "Could not load image";

                  }

                  http = null;

              };

              http.open("GET", img.src, true);

              http.responseType = "arraybuffer";

              http.send(null);

          }

      } else if (window.FileReader && (img instanceof window.Blob || img instanceof window.File)) {

          fileReader.onload = function(e) {

              handleBinaryFile(e.target.result);

          };

          fileReader.readAsArrayBuffer(img);

      }

  }

  function findEXIFinJPEG(file) {

      var dataView = new DataView(file);

      if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {

          if (debug) console.log("Not a valid JPEG");

          return false; // not a valid jpeg

      }

      var offset = 2,

          length = file.byteLength,

          marker;

      while (offset < length) {

          if (dataView.getUint8(offset) != 0xFF) {

              if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset));

              return false; // not a valid marker, something is wrong

          }

          marker = dataView.getUint8(offset + 1);

          if (debug) console.log(marker);

          // we could implement handling for other markers here,

          // but we're only looking for 0xFFE1 for EXIF data

          if (marker == 225) {

              if (debug) console.log("Found 0xFFE1 marker");

              // offset += 2 + file.getShortAt(offset+2, true);

              offset += 2 + dataView.getUint16(offset+2);

          }

      }

  }

  function findIPTCinJPEG(file) {

      var dataView = new DataView(file);

      if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {

          if (debug) console.log("Not a valid JPEG");

          return false; // not a valid jpeg

      }

      var offset = 2,

          length = file.byteLength;

      var isFieldSegmentStart = function(dataView, offset){

          return (

              dataView.getUint8(offset) === 0x38 &&

              dataView.getUint8(offset+1) === 0x42 &&

              dataView.getUint8(offset+2) === 0x49 &&

              dataView.getUint8(offset+3) === 0x4D &&

              dataView.getUint8(offset+4) === 0x04 &&

              dataView.getUint8(offset+5) === 0x04

          );

      };

      while (offset < length) {

          if ( isFieldSegmentStart(dataView, offset )){

              // Get the length of the name header (which is padded to an even number of bytes)

              var nameHeaderLength = dataView.getUint8(offset+7);

              if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1;