ngx-image-cropper - npm Package Compare versions

Comparing version 0.2.7 to 0.2.8

bundles/ngx-image-cropper.umd.js

@@ -7,2 +7,126 @@ (function (global, factory) {
 
+var ImageUtils = (function () {
+    function ImageUtils() {
+    }
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    ImageUtils.getOrientation = function (imageBase64) {
+        var /** @type {?} */ view = new DataView(this.base64ToArrayBuffer(imageBase64));
+        if (view.getUint16(0, false) != 0xFFD8) {
+            return -2;
+        }
+        var /** @type {?} */ length = view.byteLength;
+        var /** @type {?} */ offset = 2;
+        while (offset < length) {
+            if (view.getUint16(offset + 2, false) <= 8)
+                return -1;
+            var /** @type {?} */ marker = view.getUint16(offset, false);
+            offset += 2;
+            if (marker == 0xFFE1) {
+                if (view.getUint32(offset += 2, false) != 0x45786966) {
+                    return -1;
+                }
+                var /** @type {?} */ little = view.getUint16(offset += 6, false) == 0x4949;
+                offset += view.getUint32(offset + 4, little);
+                var /** @type {?} */ tags = view.getUint16(offset, little);
+                offset += 2;
+                for (var /** @type {?} */ i = 0; i < tags; i++) {
+                    if (view.getUint16(offset + (i * 12), little) == 0x0112) {
+                        return view.getUint16(offset + (i * 12) + 8, little);
+                    }
+                }
+            }
+            else if ((marker & 0xFF00) != 0xFF00) {
+                break;
+            }
+            else {
+                offset += view.getUint16(offset, false);
+            }
+        }
+        return -1;
+    };
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    ImageUtils.base64ToArrayBuffer = function (imageBase64) {
+        imageBase64 = imageBase64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
+        var /** @type {?} */ binaryString = atob(imageBase64);
+        var /** @type {?} */ len = binaryString.length;
+        var /** @type {?} */ bytes = new Uint8Array(len);
+        for (var /** @type {?} */ i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        return bytes.buffer;
+    };
+    /**
+     * @param {?} srcBase64
+     * @param {?} srcOrientation
+     * @param {?} callback
+     * @return {?}
+     */
+    ImageUtils.resetOrientation = function (srcBase64, srcOrientation, callback) {
+        var /** @type {?} */ img = new Image();
+        img.onload = function () {
+            var /** @type {?} */ width = img.width;
+            var /** @type {?} */ height = img.height;
+            var /** @type {?} */ canvas = document.createElement('canvas');
+            var /** @type {?} */ ctx = canvas.getContext('2d');
+            if (ctx) {
+                if (4 < srcOrientation && srcOrientation < 9) {
+                    canvas.width = height;
+                    canvas.height = width;
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+                ImageUtils.transformCanvas(ctx, srcOrientation, width, height);
+                ctx.drawImage(img, 0, 0);
+                callback(canvas.toDataURL());
+            }
+            else {
+                callback(srcBase64);
+            }
+        };
+        img.src = srcBase64;
+    };
+    /**
+     * @param {?} ctx
+     * @param {?} orientation
+     * @param {?} width
+     * @param {?} height
+     * @return {?}
+     */
+    ImageUtils.transformCanvas = function (ctx, orientation, width, height) {
+        switch (orientation) {
+            case 2:
+                ctx.transform(-1, 0, 0, 1, width, 0);
+                break;
+            case 3:
+                ctx.transform(-1, 0, 0, -1, width, height);
+                break;
+            case 4:
+                ctx.transform(1, 0, 0, -1, 0, height);
+                break;
+            case 5:
+                ctx.transform(0, 1, 1, 0, 0, 0);
+                break;
+            case 6:
+                ctx.transform(0, 1, -1, 0, height, 0);
+                break;
+            case 7:
+                ctx.transform(0, -1, -1, 0, height, width);
+                break;
+            case 8:
+                ctx.transform(0, -1, 1, 0, 0, width);
+                break;
+            default:
+                break;
+        }
+    };
+    return ImageUtils;
+}());
 var ImageCropperComponent = (function () {
@@ -119,7 +243,5 @@ /**
         fileReader.onload = function (ev) {
-            if (event.target.files[0].type === 'image/jpeg' ||
-                event.target.files[0].type === 'image/jpg' ||
-                event.target.files[0].type === 'image/png' ||
-                event.target.files[0].type === 'image/gif') {
-                _this.loadBase64Image(ev.target.result);
+            var /** @type {?} */ imageType = event.target.files[0].type;
+            if (_this.isValidImageType(imageType)) {
+                _this.checkExifRotationAndLoadImage(ev.target.result);
             }
@@ -133,5 +255,29 @@ else {
     /**
+     * @param {?} type
+     * @return {?}
+     */
+    ImageCropperComponent.prototype.isValidImageType = function (type) {
+        return type === 'image/jpeg'
+            || type === 'image/jpg'
+            || type === 'image/png'
+            || type === 'image/gif';
+    };
+    /**
      * @param {?} imageBase64
      * @return {?}
      */
+    ImageCropperComponent.prototype.checkExifRotationAndLoadImage = function (imageBase64) {
+        var _this = this;
+        var /** @type {?} */ exifRotation = ImageUtils.getOrientation(imageBase64);
+        if (exifRotation > 1) {
+            ImageUtils.resetOrientation(imageBase64, exifRotation, function (rotatedBase64) { return _this.loadBase64Image(rotatedBase64); });
+        }
+        else {
+            this.loadBase64Image(imageBase64);
+        }
+    };
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
     ImageCropperComponent.prototype.loadBase64Image = function (imageBase64) {
@@ -166,3 +312,3 @@ var _this = this;
      */
-    ImageCropperComponent.prototype.imageResizedInView = function (event) {
+    ImageCropperComponent.prototype.onResize = function (event) {
         this.resizeCropperPosition();
@@ -482,3 +628,3 @@ this.setMaxSize();
     'loadImageFailed': [{ type: core.Output },],
-    'imageResizedInView': [{ type: core.HostListener, args: ['window:resize', ['$event'],] },],
+    'onResize': [{ type: core.HostListener, args: ['window:resize', ['$event'],] },],
     'moveImg': [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }, { type: core.HostListener, args: ['document:touchmove', ['$event'],] },],
@@ -485,0 +631,0 @@ 'moveStop': [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }, { type: core.HostListener, args: ['document:touchend', ['$event'],] },],

bundles/ngx-image-cropper.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e(t["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,function(t,e,i,r){"use strict";var s=function(){function t(t,i,r){this.elementRef=t,this.sanitizer=i,this.cd=r,this.marginLeft="0px",this.imageVisible=!1,this.format="png",this.maintainAspectRatio=!0,this.aspectRatio=1,this.resizeToWidth=0,this.onlyScaleDown=!1,this.imageQuality=92,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.imageCropped=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return Object.defineProperty(t.prototype,"imageChangedEvent",{set:function(t){this.initCropper(),t&&t.target&&t.target.files&&t.target.files.length>0&&this.loadImage(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"imageBase64",{set:function(t){this.initCropper(),this.loadBase64Image(t)},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){var e=this;t.cropper&&setTimeout(function(){e.setMaxSize(),e.checkCropperPosition(!1),e.crop(),e.cd.markForCheck()})},t.prototype.initCropper=function(){this.imageVisible=!1,this.originalImage=null,this.safeImgDataUrl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",this.moveStart={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},this.maxSize={width:0,height:0},this.originalSize={width:0,height:0},this.cropper.x1=-100,this.cropper.y1=-100,this.cropper.x2=1e4,this.cropper.y2=1e4},t.prototype.loadImage=function(t){var e=this,i=new FileReader;i.onload=function(i){"image/jpeg"===t.target.files[0].type||"image/jpg"===t.target.files[0].type||"image/png"===t.target.files[0].type||"image/gif"===t.target.files[0].type?e.loadBase64Image(i.target.result):e.loadImageFailed.emit()},i.readAsDataURL(t.target.files[0])},t.prototype.loadBase64Image=function(t){var e=this;this.originalImage=new Image,this.originalImage.onload=function(){e.originalSize.width=e.originalImage.width,e.originalSize.height=e.originalImage.height,e.cd.markForCheck()},this.safeImgDataUrl=this.sanitizer.bypassSecurityTrustResourceUrl(t),this.originalImage.src=t},t.prototype.imageLoadedInView=function(){var t=this;null!=this.originalImage&&(this.imageLoaded.emit(),setTimeout(function(){t.setMaxSize(),t.resetCropperPosition(),t.cd.markForCheck()}))},t.prototype.imageResizedInView=function(t){this.resizeCropperPosition(),this.setMaxSize()},t.prototype.resizeCropperPosition=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");this.maxSize.width===t.offsetWidth&&this.maxSize.height===t.offsetHeight||(this.cropper.x1=this.cropper.x1*t.offsetWidth/this.maxSize.width,this.cropper.x2=this.cropper.x2*t.offsetWidth/this.maxSize.width,this.cropper.y1=this.cropper.y1*t.offsetHeight/this.maxSize.height,this.cropper.y2=this.cropper.y2*t.offsetHeight/this.maxSize.height)},t.prototype.resetCropperPosition=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");if(t.offsetWidth/this.aspectRatio<t.offsetHeight){this.cropper.x1=0,this.cropper.x2=t.offsetWidth;var e=t.offsetWidth/this.aspectRatio;this.cropper.y1=(t.offsetHeight-e)/2,this.cropper.y2=this.cropper.y1+e}else{this.cropper.y1=0,this.cropper.y2=t.offsetHeight;var i=t.offsetHeight*this.aspectRatio;this.cropper.x1=(t.offsetWidth-i)/2,this.cropper.x2=this.cropper.x1+i}this.crop(),this.imageVisible=!0},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart.active=!0,this.moveStart.type=e,this.moveStart.position=i,this.moveStart.clientX=this.getClientX(t),this.moveStart.clientY=this.getClientY(t),Object.assign(this.moveStart,this.cropper),this.cd.markForCheck()},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation(),t.preventDefault(),this.setMaxSize(),"move"===this.moveStart.type?(this.move(t),this.checkCropperPosition(!0)):"resize"===this.moveStart.type&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.markForCheck())},t.prototype.setMaxSize=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")},t.prototype.checkCropperPosition=function(t){void 0===t&&(t=!1),this.cropper.x1<0&&(this.cropper.x2-=t?this.cropper.x1:0,this.cropper.x1=0),this.cropper.y1<0&&(this.cropper.y2-=t?this.cropper.y1:0,this.cropper.y1=0),this.cropper.x2>this.maxSize.width&&(this.cropper.x1-=t?this.cropper.x2-this.maxSize.width:0,this.cropper.x2=this.maxSize.width),this.cropper.y2>this.maxSize.height&&(this.cropper.y1-=t?this.cropper.y2-this.maxSize.height:0,this.cropper.y2=this.maxSize.height)},t.prototype.moveStop=function(t){this.moveStart.active&&(this.moveStart.active=!1,this.crop(),this.cd.markForCheck())},t.prototype.move=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;this.cropper.x1=this.moveStart.x1+e,this.cropper.y1=this.moveStart.y1+i,this.cropper.x2=this.moveStart.x2+e,this.cropper.y2=this.moveStart.y2+i},t.prototype.resize=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;switch(this.moveStart.position){case"left":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20)}this.maintainAspectRatio&&this.checkAspectRatio()},t.prototype.checkAspectRatio=function(){var t=0,e=0;switch(this.moveStart.position){case"top":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"bottom":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topleft":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topright":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"right":case"bottomright":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"left":case"bottomleft":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio)}},t.prototype.crop=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");if(t&&null!=this.originalImage){var e=this.originalSize.width/t.offsetWidth,i=Math.round(this.cropper.x1*e),r=Math.round(this.cropper.y1*e),s=Math.round((this.cropper.x2-this.cropper.x1)*e),o=Math.round((this.cropper.y2-this.cropper.y1)*e),p=this.getResizeRatio(s),a=document.createElement("canvas");a.width=s*p,a.height=o*p;var n=a.getContext("2d");if(n){n.drawImage(this.originalImage,i,r,s,o,0,0,s*p,o*p);var h=Math.min(1,Math.max(0,this.imageQuality/100)),c=a.toDataURL("image/"+this.format,h);c.length>10&&this.imageCropped.emit(c)}}},t.prototype.getResizeRatio=function(t){return this.resizeToWidth>0&&(!this.onlyScaleDown||t>this.resizeToWidth)?this.resizeToWidth/t:1},t.prototype.getClientX=function(t){return null!=t.clientX?t.clientX:t.touches[0].clientX},t.prototype.getClientY=function(t){return null!=t.clientY?t.clientY:t.touches[0].clientY},t}();s.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'\n      <div>\n          <img\n              [src]="safeImgDataUrl"\n              [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n              (load)="imageLoadedInView()"\n              class="source-image"\n          />\n          <div class="cropper"\n               [style.top.px]="cropper.y1"\n               [style.left.px]="cropper.x1"\n               [style.width.px]="cropper.x2 - cropper.x1"\n               [style.height.px]="cropper.y2 - cropper.y1"\n               [style.margin-left]="marginLeft"\n               [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n          >\n              <div\n                  (mousedown)="startMove($event, \'move\')"\n                  (touchstart)="startMove($event, \'move\')"\n                  class="move"\n              >&nbsp;</div>\n              <span\n                  class="resize topleft"\n                  (mousedown)="startMove($event, \'resize\', \'topleft\')"\n                  (touchstart)="startMove($event, \'resize\', \'topleft\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize top"\n              ><span class="square"></span></span>\n              <span\n                  class="resize topright"\n                  (mousedown)="startMove($event, \'resize\', \'topright\')"\n                  (touchstart)="startMove($event, \'resize\', \'topright\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize right"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottomright"\n                  (mousedown)="startMove($event, \'resize\', \'bottomright\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottomright\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottom"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottomleft"\n                  (mousedown)="startMove($event, \'resize\', \'bottomleft\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottomleft\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize left"\n              ><span class="square"></span></span>\n              <span\n                  class="resize-bar top"\n                  (mousedown)="startMove($event, \'resize\', \'top\')"\n                  (touchstart)="startMove($event, \'resize\', \'top\')"\n              ></span>\n              <span\n                  class="resize-bar right"\n                  (mousedown)="startMove($event, \'resize\', \'right\')"\n                  (touchstart)="startMove($event, \'resize\', \'right\')"\n              ></span>\n              <span\n                  class="resize-bar bottom"\n                  (mousedown)="startMove($event, \'resize\', \'bottom\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottom\')"\n              ></span>\n              <span\n                  class="resize-bar left"\n                  (mousedown)="startMove($event, \'resize\', \'left\')"\n                  (touchstart)="startMove($event, \'resize\', \'left\')"\n              ></span>\n          </div>\n      </div>\n    ',styles:["\n      :host {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        overflow: hidden;\n        padding: 5px;\n        text-align: center;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative;\n          width: 100%; }\n          :host > div .source-image {\n            max-width: 100%;\n            max-height: 100%; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid;\n          -ms-touch-action: none;\n              touch-action: none; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            display: inline-block;\n            line-height: 6px;\n            padding: 8px;\n            opacity: .85;\n            z-index: 1; }\n            :host .cropper .resize .square {\n              display: inline-block;\n              background: #53535C !important;\n              width: 6px;\n              height: 6px;\n              border: 1px solid rgba(255, 255, 255, 0.5); }\n            :host .cropper .resize.topleft {\n              top: -12px;\n              left: -12px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -12px;\n              left: calc(50% - 12px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -12px;\n              right: -12px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 12px);\n              right: -12px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: -12px;\n              right: -12px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: -12px;\n              left: calc(50% - 12px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: -12px;\n              left: -12px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 12px);\n              left: -12px;\n              cursor: w-resize; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 11px;\n              right: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 11px;\n              left: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: w-resize; }\n    "],changeDetection:e.ChangeDetectionStrategy.OnPush}]}],s.ctorParameters=function(){return[{type:e.ElementRef},{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},s.propDecorators={imageChangedEvent:[{type:e.Input}],imageBase64:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],cropper:[{type:e.Input}],imageCropped:[{type:e.Output}],imageLoaded:[{type:e.Output}],loadImageFailed:[{type:e.Output}],imageResizedInView:[{type:e.HostListener,args:["window:resize",["$event"]]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup",["$event"]]},{type:e.HostListener,args:["document:touchend",["$event"]]}]};var o=function(){return function(){}}();o.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[s],exports:[s]}]}],o.ctorParameters=function(){return[]},t.ImageCropperModule=o,t.ImageCropperComponent=s,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e(t["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,function(t,e,i,r){"use strict";var o=function(){function t(){}return t.getOrientation=function(t){var e=new DataView(this.base64ToArrayBuffer(t));if(65496!=e.getUint16(0,!1))return-2;for(var i=e.byteLength,r=2;r<i;){if(e.getUint16(r+2,!1)<=8)return-1;var o=e.getUint16(r,!1);if(r+=2,65505==o){if(1165519206!=e.getUint32(r+=2,!1))return-1;var s=18761==e.getUint16(r+=6,!1);r+=e.getUint32(r+4,s);var a=e.getUint16(r,s);r+=2;for(var n=0;n<a;n++)if(274==e.getUint16(r+12*n,s))return e.getUint16(r+12*n+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1},t.base64ToArrayBuffer=function(t){t=t.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var e=atob(t),i=e.length,r=new Uint8Array(i),o=0;o<i;o++)r[o]=e.charCodeAt(o);return r.buffer},t.resetOrientation=function(e,i,r){var o=new Image;o.onload=function(){var s=o.width,a=o.height,n=document.createElement("canvas"),p=n.getContext("2d");p?(4<i&&i<9?(n.width=a,n.height=s):(n.width=s,n.height=a),t.transformCanvas(p,i,s,a),p.drawImage(o,0,0),r(n.toDataURL())):r(e)},o.src=e},t.transformCanvas=function(t,e,i,r){switch(e){case 2:t.transform(-1,0,0,1,i,0);break;case 3:t.transform(-1,0,0,-1,i,r);break;case 4:t.transform(1,0,0,-1,0,r);break;case 5:t.transform(0,1,1,0,0,0);break;case 6:t.transform(0,1,-1,0,r,0);break;case 7:t.transform(0,-1,-1,0,r,i);break;case 8:t.transform(0,-1,1,0,0,i)}},t}(),s=function(){function t(t,i,r){this.elementRef=t,this.sanitizer=i,this.cd=r,this.marginLeft="0px",this.imageVisible=!1,this.format="png",this.maintainAspectRatio=!0,this.aspectRatio=1,this.resizeToWidth=0,this.onlyScaleDown=!1,this.imageQuality=92,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.imageCropped=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return Object.defineProperty(t.prototype,"imageChangedEvent",{set:function(t){this.initCropper(),t&&t.target&&t.target.files&&t.target.files.length>0&&this.loadImage(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"imageBase64",{set:function(t){this.initCropper(),this.loadBase64Image(t)},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){var e=this;t.cropper&&setTimeout(function(){e.setMaxSize(),e.checkCropperPosition(!1),e.crop(),e.cd.markForCheck()})},t.prototype.initCropper=function(){this.imageVisible=!1,this.originalImage=null,this.safeImgDataUrl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",this.moveStart={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},this.maxSize={width:0,height:0},this.originalSize={width:0,height:0},this.cropper.x1=-100,this.cropper.y1=-100,this.cropper.x2=1e4,this.cropper.y2=1e4},t.prototype.loadImage=function(t){var e=this,i=new FileReader;i.onload=function(i){var r=t.target.files[0].type;e.isValidImageType(r)?e.checkExifRotationAndLoadImage(i.target.result):e.loadImageFailed.emit()},i.readAsDataURL(t.target.files[0])},t.prototype.isValidImageType=function(t){return"image/jpeg"===t||"image/jpg"===t||"image/png"===t||"image/gif"===t},t.prototype.checkExifRotationAndLoadImage=function(t){var e=this,i=o.getOrientation(t);i>1?o.resetOrientation(t,i,function(t){return e.loadBase64Image(t)}):this.loadBase64Image(t)},t.prototype.loadBase64Image=function(t){var e=this;this.originalImage=new Image,this.originalImage.onload=function(){e.originalSize.width=e.originalImage.width,e.originalSize.height=e.originalImage.height,e.cd.markForCheck()},this.safeImgDataUrl=this.sanitizer.bypassSecurityTrustResourceUrl(t),this.originalImage.src=t},t.prototype.imageLoadedInView=function(){var t=this;null!=this.originalImage&&(this.imageLoaded.emit(),setTimeout(function(){t.setMaxSize(),t.resetCropperPosition(),t.cd.markForCheck()}))},t.prototype.onResize=function(t){this.resizeCropperPosition(),this.setMaxSize()},t.prototype.resizeCropperPosition=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");this.maxSize.width===t.offsetWidth&&this.maxSize.height===t.offsetHeight||(this.cropper.x1=this.cropper.x1*t.offsetWidth/this.maxSize.width,this.cropper.x2=this.cropper.x2*t.offsetWidth/this.maxSize.width,this.cropper.y1=this.cropper.y1*t.offsetHeight/this.maxSize.height,this.cropper.y2=this.cropper.y2*t.offsetHeight/this.maxSize.height)},t.prototype.resetCropperPosition=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");if(t.offsetWidth/this.aspectRatio<t.offsetHeight){this.cropper.x1=0,this.cropper.x2=t.offsetWidth;var e=t.offsetWidth/this.aspectRatio;this.cropper.y1=(t.offsetHeight-e)/2,this.cropper.y2=this.cropper.y1+e}else{this.cropper.y1=0,this.cropper.y2=t.offsetHeight;var i=t.offsetHeight*this.aspectRatio;this.cropper.x1=(t.offsetWidth-i)/2,this.cropper.x2=this.cropper.x1+i}this.crop(),this.imageVisible=!0},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart.active=!0,this.moveStart.type=e,this.moveStart.position=i,this.moveStart.clientX=this.getClientX(t),this.moveStart.clientY=this.getClientY(t),Object.assign(this.moveStart,this.cropper),this.cd.markForCheck()},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation(),t.preventDefault(),this.setMaxSize(),"move"===this.moveStart.type?(this.move(t),this.checkCropperPosition(!0)):"resize"===this.moveStart.type&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.markForCheck())},t.prototype.setMaxSize=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")},t.prototype.checkCropperPosition=function(t){void 0===t&&(t=!1),this.cropper.x1<0&&(this.cropper.x2-=t?this.cropper.x1:0,this.cropper.x1=0),this.cropper.y1<0&&(this.cropper.y2-=t?this.cropper.y1:0,this.cropper.y1=0),this.cropper.x2>this.maxSize.width&&(this.cropper.x1-=t?this.cropper.x2-this.maxSize.width:0,this.cropper.x2=this.maxSize.width),this.cropper.y2>this.maxSize.height&&(this.cropper.y1-=t?this.cropper.y2-this.maxSize.height:0,this.cropper.y2=this.maxSize.height)},t.prototype.moveStop=function(t){this.moveStart.active&&(this.moveStart.active=!1,this.crop(),this.cd.markForCheck())},t.prototype.move=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;this.cropper.x1=this.moveStart.x1+e,this.cropper.y1=this.moveStart.y1+i,this.cropper.x2=this.moveStart.x2+e,this.cropper.y2=this.moveStart.y2+i},t.prototype.resize=function(t){var e=this.getClientX(t)-this.moveStart.clientX,i=this.getClientY(t)-this.moveStart.clientY;switch(this.moveStart.position){case"left":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-20);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+20),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-20),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+20)}this.maintainAspectRatio&&this.checkAspectRatio()},t.prototype.checkAspectRatio=function(){var t=0,e=0;switch(this.moveStart.position){case"top":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"bottom":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topleft":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"topright":this.cropper.y1=this.cropper.y2-(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(0-this.cropper.y1,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y1+=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"right":case"bottomright":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(this.cropper.x2-this.maxSize.width,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x2-=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio);break;case"left":case"bottomleft":this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio,t=Math.max(0-this.cropper.x1,0),e=Math.max(this.cropper.y2-this.maxSize.height,0),(t>0||e>0)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio)}},t.prototype.crop=function(){var t=this.elementRef.nativeElement.querySelector(".source-image");if(t&&null!=this.originalImage){var e=this.originalSize.width/t.offsetWidth,i=Math.round(this.cropper.x1*e),r=Math.round(this.cropper.y1*e),o=Math.round((this.cropper.x2-this.cropper.x1)*e),s=Math.round((this.cropper.y2-this.cropper.y1)*e),a=this.getResizeRatio(o),n=document.createElement("canvas");n.width=o*a,n.height=s*a;var p=n.getContext("2d");if(p){p.drawImage(this.originalImage,i,r,o,s,0,0,o*a,s*a);var h=Math.min(1,Math.max(0,this.imageQuality/100)),c=n.toDataURL("image/"+this.format,h);c.length>10&&this.imageCropped.emit(c)}}},t.prototype.getResizeRatio=function(t){return this.resizeToWidth>0&&(!this.onlyScaleDown||t>this.resizeToWidth)?this.resizeToWidth/t:1},t.prototype.getClientX=function(t){return null!=t.clientX?t.clientX:t.touches[0].clientX},t.prototype.getClientY=function(t){return null!=t.clientY?t.clientY:t.touches[0].clientY},t}();s.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'\n      <div>\n          <img\n              [src]="safeImgDataUrl"\n              [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n              (load)="imageLoadedInView()"\n              class="source-image"\n          />\n          <div class="cropper"\n               [style.top.px]="cropper.y1"\n               [style.left.px]="cropper.x1"\n               [style.width.px]="cropper.x2 - cropper.x1"\n               [style.height.px]="cropper.y2 - cropper.y1"\n               [style.margin-left]="marginLeft"\n               [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n          >\n              <div\n                  (mousedown)="startMove($event, \'move\')"\n                  (touchstart)="startMove($event, \'move\')"\n                  class="move"\n              >&nbsp;</div>\n              <span\n                  class="resize topleft"\n                  (mousedown)="startMove($event, \'resize\', \'topleft\')"\n                  (touchstart)="startMove($event, \'resize\', \'topleft\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize top"\n              ><span class="square"></span></span>\n              <span\n                  class="resize topright"\n                  (mousedown)="startMove($event, \'resize\', \'topright\')"\n                  (touchstart)="startMove($event, \'resize\', \'topright\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize right"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottomright"\n                  (mousedown)="startMove($event, \'resize\', \'bottomright\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottomright\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottom"\n              ><span class="square"></span></span>\n              <span\n                  class="resize bottomleft"\n                  (mousedown)="startMove($event, \'resize\', \'bottomleft\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottomleft\')"\n              ><span class="square"></span></span>\n              <span\n                  class="resize left"\n              ><span class="square"></span></span>\n              <span\n                  class="resize-bar top"\n                  (mousedown)="startMove($event, \'resize\', \'top\')"\n                  (touchstart)="startMove($event, \'resize\', \'top\')"\n              ></span>\n              <span\n                  class="resize-bar right"\n                  (mousedown)="startMove($event, \'resize\', \'right\')"\n                  (touchstart)="startMove($event, \'resize\', \'right\')"\n              ></span>\n              <span\n                  class="resize-bar bottom"\n                  (mousedown)="startMove($event, \'resize\', \'bottom\')"\n                  (touchstart)="startMove($event, \'resize\', \'bottom\')"\n              ></span>\n              <span\n                  class="resize-bar left"\n                  (mousedown)="startMove($event, \'resize\', \'left\')"\n                  (touchstart)="startMove($event, \'resize\', \'left\')"\n              ></span>\n          </div>\n      </div>\n    ',styles:["\n      :host {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        overflow: hidden;\n        padding: 5px;\n        text-align: center;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative;\n          width: 100%; }\n          :host > div .source-image {\n            max-width: 100%;\n            max-height: 100%; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid;\n          -ms-touch-action: none;\n              touch-action: none; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            display: inline-block;\n            line-height: 6px;\n            padding: 8px;\n            opacity: .85;\n            z-index: 1; }\n            :host .cropper .resize .square {\n              display: inline-block;\n              background: #53535C !important;\n              width: 6px;\n              height: 6px;\n              border: 1px solid rgba(255, 255, 255, 0.5); }\n            :host .cropper .resize.topleft {\n              top: -12px;\n              left: -12px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -12px;\n              left: calc(50% - 12px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -12px;\n              right: -12px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 12px);\n              right: -12px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: -12px;\n              right: -12px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: -12px;\n              left: calc(50% - 12px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: -12px;\n              left: -12px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 12px);\n              left: -12px;\n              cursor: w-resize; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 11px;\n              right: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 11px;\n              left: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: w-resize; }\n    "],changeDetection:e.ChangeDetectionStrategy.OnPush}]}],s.ctorParameters=function(){return[{type:e.ElementRef},{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},s.propDecorators={imageChangedEvent:[{type:e.Input}],imageBase64:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],cropper:[{type:e.Input}],imageCropped:[{type:e.Output}],imageLoaded:[{type:e.Output}],loadImageFailed:[{type:e.Output}],onResize:[{type:e.HostListener,args:["window:resize",["$event"]]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup",["$event"]]},{type:e.HostListener,args:["document:touchend",["$event"]]}]};var a=function(){return function(){}}();a.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[s],exports:[s]}]}],a.ctorParameters=function(){return[]},t.ImageCropperModule=a,t.ImageCropperComponent=s,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-image-cropper.umd.min.js.map

ngx-image-cropper.es5.js

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, NgModule, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
+var ImageUtils = (function () {
+    function ImageUtils() {
+    }
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    ImageUtils.getOrientation = function (imageBase64) {
+        var /** @type {?} */ view = new DataView(this.base64ToArrayBuffer(imageBase64));
+        if (view.getUint16(0, false) != 0xFFD8) {
+            return -2;
+        }
+        var /** @type {?} */ length = view.byteLength;
+        var /** @type {?} */ offset = 2;
+        while (offset < length) {
+            if (view.getUint16(offset + 2, false) <= 8)
+                return -1;
+            var /** @type {?} */ marker = view.getUint16(offset, false);
+            offset += 2;
+            if (marker == 0xFFE1) {
+                if (view.getUint32(offset += 2, false) != 0x45786966) {
+                    return -1;
+                }
+                var /** @type {?} */ little = view.getUint16(offset += 6, false) == 0x4949;
+                offset += view.getUint32(offset + 4, little);
+                var /** @type {?} */ tags = view.getUint16(offset, little);
+                offset += 2;
+                for (var /** @type {?} */ i = 0; i < tags; i++) {
+                    if (view.getUint16(offset + (i * 12), little) == 0x0112) {
+                        return view.getUint16(offset + (i * 12) + 8, little);
+                    }
+                }
+            }
+            else if ((marker & 0xFF00) != 0xFF00) {
+                break;
+            }
+            else {
+                offset += view.getUint16(offset, false);
+            }
+        }
+        return -1;
+    };
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    ImageUtils.base64ToArrayBuffer = function (imageBase64) {
+        imageBase64 = imageBase64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
+        var /** @type {?} */ binaryString = atob(imageBase64);
+        var /** @type {?} */ len = binaryString.length;
+        var /** @type {?} */ bytes = new Uint8Array(len);
+        for (var /** @type {?} */ i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        return bytes.buffer;
+    };
+    /**
+     * @param {?} srcBase64
+     * @param {?} srcOrientation
+     * @param {?} callback
+     * @return {?}
+     */
+    ImageUtils.resetOrientation = function (srcBase64, srcOrientation, callback) {
+        var /** @type {?} */ img = new Image();
+        img.onload = function () {
+            var /** @type {?} */ width = img.width;
+            var /** @type {?} */ height = img.height;
+            var /** @type {?} */ canvas = document.createElement('canvas');
+            var /** @type {?} */ ctx = canvas.getContext('2d');
+            if (ctx) {
+                if (4 < srcOrientation && srcOrientation < 9) {
+                    canvas.width = height;
+                    canvas.height = width;
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+                ImageUtils.transformCanvas(ctx, srcOrientation, width, height);
+                ctx.drawImage(img, 0, 0);
+                callback(canvas.toDataURL());
+            }
+            else {
+                callback(srcBase64);
+            }
+        };
+        img.src = srcBase64;
+    };
+    /**
+     * @param {?} ctx
+     * @param {?} orientation
+     * @param {?} width
+     * @param {?} height
+     * @return {?}
+     */
+    ImageUtils.transformCanvas = function (ctx, orientation, width, height) {
+        switch (orientation) {
+            case 2:
+                ctx.transform(-1, 0, 0, 1, width, 0);
+                break;
+            case 3:
+                ctx.transform(-1, 0, 0, -1, width, height);
+                break;
+            case 4:
+                ctx.transform(1, 0, 0, -1, 0, height);
+                break;
+            case 5:
+                ctx.transform(0, 1, 1, 0, 0, 0);
+                break;
+            case 6:
+                ctx.transform(0, 1, -1, 0, height, 0);
+                break;
+            case 7:
+                ctx.transform(0, -1, -1, 0, height, width);
+                break;
+            case 8:
+                ctx.transform(0, -1, 1, 0, 0, width);
+                break;
+            default:
+                break;
+        }
+    };
+    return ImageUtils;
+}());
 var ImageCropperComponent = (function () {
@@ -115,7 +239,5 @@ /**
         fileReader.onload = function (ev) {
-            if (event.target.files[0].type === 'image/jpeg' ||
-                event.target.files[0].type === 'image/jpg' ||
-                event.target.files[0].type === 'image/png' ||
-                event.target.files[0].type === 'image/gif') {
-                _this.loadBase64Image(ev.target.result);
+            var /** @type {?} */ imageType = event.target.files[0].type;
+            if (_this.isValidImageType(imageType)) {
+                _this.checkExifRotationAndLoadImage(ev.target.result);
             }
@@ -129,5 +251,29 @@ else {
     /**
+     * @param {?} type
+     * @return {?}
+     */
+    ImageCropperComponent.prototype.isValidImageType = function (type) {
+        return type === 'image/jpeg'
+            || type === 'image/jpg'
+            || type === 'image/png'
+            || type === 'image/gif';
+    };
+    /**
      * @param {?} imageBase64
      * @return {?}
      */
+    ImageCropperComponent.prototype.checkExifRotationAndLoadImage = function (imageBase64) {
+        var _this = this;
+        var /** @type {?} */ exifRotation = ImageUtils.getOrientation(imageBase64);
+        if (exifRotation > 1) {
+            ImageUtils.resetOrientation(imageBase64, exifRotation, function (rotatedBase64) { return _this.loadBase64Image(rotatedBase64); });
+        }
+        else {
+            this.loadBase64Image(imageBase64);
+        }
+    };
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
     ImageCropperComponent.prototype.loadBase64Image = function (imageBase64) {
@@ -162,3 +308,3 @@ var _this = this;
      */
-    ImageCropperComponent.prototype.imageResizedInView = function (event) {
+    ImageCropperComponent.prototype.onResize = function (event) {
         this.resizeCropperPosition();
@@ -478,3 +624,3 @@ this.setMaxSize();
     'loadImageFailed': [{ type: Output },],
-    'imageResizedInView': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
+    'onResize': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
     'moveImg': [{ type: HostListener, args: ['document:mousemove', ['$event'],] }, { type: HostListener, args: ['document:touchmove', ['$event'],] },],
@@ -481,0 +627,0 @@ 'moveStop': [{ type: HostListener, args: ['document:mouseup', ['$event'],] }, { type: HostListener, args: ['document:touchend', ['$event'],] },],

ngx-image-cropper.js

@@ -5,2 +5,124 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, NgModule, Output } from '@angular/core';
 
+class ImageUtils {
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    static getOrientation(imageBase64) {
+        const /** @type {?} */ view = new DataView(this.base64ToArrayBuffer(imageBase64));
+        if (view.getUint16(0, false) != 0xFFD8) {
+            return -2;
+        }
+        const /** @type {?} */ length = view.byteLength;
+        let /** @type {?} */ offset = 2;
+        while (offset < length) {
+            if (view.getUint16(offset + 2, false) <= 8)
+                return -1;
+            const /** @type {?} */ marker = view.getUint16(offset, false);
+            offset += 2;
+            if (marker == 0xFFE1) {
+                if (view.getUint32(offset += 2, false) != 0x45786966) {
+                    return -1;
+                }
+                const /** @type {?} */ little = view.getUint16(offset += 6, false) == 0x4949;
+                offset += view.getUint32(offset + 4, little);
+                const /** @type {?} */ tags = view.getUint16(offset, little);
+                offset += 2;
+                for (let /** @type {?} */ i = 0; i < tags; i++) {
+                    if (view.getUint16(offset + (i * 12), little) == 0x0112) {
+                        return view.getUint16(offset + (i * 12) + 8, little);
+                    }
+                }
+            }
+            else if ((marker & 0xFF00) != 0xFF00) {
+                break;
+            }
+            else {
+                offset += view.getUint16(offset, false);
+            }
+        }
+        return -1;
+    }
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
+    static base64ToArrayBuffer(imageBase64) {
+        imageBase64 = imageBase64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
+        const /** @type {?} */ binaryString = atob(imageBase64);
+        const /** @type {?} */ len = binaryString.length;
+        const /** @type {?} */ bytes = new Uint8Array(len);
+        for (let /** @type {?} */ i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        return bytes.buffer;
+    }
+    /**
+     * @param {?} srcBase64
+     * @param {?} srcOrientation
+     * @param {?} callback
+     * @return {?}
+     */
+    static resetOrientation(srcBase64, srcOrientation, callback) {
+        const /** @type {?} */ img = new Image();
+        img.onload = function () {
+            const /** @type {?} */ width = img.width;
+            const /** @type {?} */ height = img.height;
+            const /** @type {?} */ canvas = document.createElement('canvas');
+            const /** @type {?} */ ctx = canvas.getContext('2d');
+            if (ctx) {
+                if (4 < srcOrientation && srcOrientation < 9) {
+                    canvas.width = height;
+                    canvas.height = width;
+                }
+                else {
+                    canvas.width = width;
+                    canvas.height = height;
+                }
+                ImageUtils.transformCanvas(ctx, srcOrientation, width, height);
+                ctx.drawImage(img, 0, 0);
+                callback(canvas.toDataURL());
+            }
+            else {
+                callback(srcBase64);
+            }
+        };
+        img.src = srcBase64;
+    }
+    /**
+     * @param {?} ctx
+     * @param {?} orientation
+     * @param {?} width
+     * @param {?} height
+     * @return {?}
+     */
+    static transformCanvas(ctx, orientation, width, height) {
+        switch (orientation) {
+            case 2:
+                ctx.transform(-1, 0, 0, 1, width, 0);
+                break;
+            case 3:
+                ctx.transform(-1, 0, 0, -1, width, height);
+                break;
+            case 4:
+                ctx.transform(1, 0, 0, -1, 0, height);
+                break;
+            case 5:
+                ctx.transform(0, 1, 1, 0, 0, 0);
+                break;
+            case 6:
+                ctx.transform(0, 1, -1, 0, height, 0);
+                break;
+            case 7:
+                ctx.transform(0, -1, -1, 0, height, width);
+                break;
+            case 8:
+                ctx.transform(0, -1, 1, 0, 0, width);
+                break;
+            default:
+                break;
+        }
+    }
+}
+
 class ImageCropperComponent {
@@ -107,7 +229,5 @@ /**
         fileReader.onload = (ev) => {
-            if (event.target.files[0].type === 'image/jpeg' ||
-                event.target.files[0].type === 'image/jpg' ||
-                event.target.files[0].type === 'image/png' ||
-                event.target.files[0].type === 'image/gif') {
-                this.loadBase64Image(ev.target.result);
+            const /** @type {?} */ imageType = event.target.files[0].type;
+            if (this.isValidImageType(imageType)) {
+                this.checkExifRotationAndLoadImage(ev.target.result);
             }
@@ -121,5 +241,28 @@ else {
     /**
+     * @param {?} type
+     * @return {?}
+     */
+    isValidImageType(type) {
+        return type === 'image/jpeg'
+            || type === 'image/jpg'
+            || type === 'image/png'
+            || type === 'image/gif';
+    }
+    /**
      * @param {?} imageBase64
      * @return {?}
      */
+    checkExifRotationAndLoadImage(imageBase64) {
+        const /** @type {?} */ exifRotation = ImageUtils.getOrientation(imageBase64);
+        if (exifRotation > 1) {
+            ImageUtils.resetOrientation(imageBase64, exifRotation, (rotatedBase64) => this.loadBase64Image(rotatedBase64));
+        }
+        else {
+            this.loadBase64Image(imageBase64);
+        }
+    }
+    /**
+     * @param {?} imageBase64
+     * @return {?}
+     */
     loadBase64Image(imageBase64) {
@@ -152,3 +295,3 @@ this.originalImage = new Image();
      */
-    imageResizedInView(event) {
+    onResize(event) {
         this.resizeCropperPosition();
@@ -662,3 +805,3 @@ this.setMaxSize();
     'loadImageFailed': [{ type: Output },],
-    'imageResizedInView': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
+    'onResize': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
     'moveImg': [{ type: HostListener, args: ['document:mousemove', ['$event'],] }, { type: HostListener, args: ['document:touchmove', ['$event'],] },],
@@ -665,0 +808,0 @@ 'moveStop': [{ type: HostListener, args: ['document:mouseup', ['$event'],] }, { type: HostListener, args: ['document:touchend', ['$event'],] },],

ngx-image-cropper.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-cropper","template":"\n      <div>\n          <img\n              [src]=\"safeImgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              (load)=\"imageLoadedInView()\"\n              class=\"source-image\"\n          />\n          <div class=\"cropper\"\n               [style.top.px]=\"cropper.y1\"\n               [style.left.px]=\"cropper.x1\"\n               [style.width.px]=\"cropper.x2 - cropper.x1\"\n               [style.height.px]=\"cropper.y2 - cropper.y1\"\n               [style.margin-left]=\"marginLeft\"\n               [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  (touchstart)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n                  (touchstart)=\"startMove($event, 'resize', 'topleft')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize top\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n                  (touchstart)=\"startMove($event, 'resize', 'topright')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize right\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottomright')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottom\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottomleft')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize left\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n                  (touchstart)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n                  (touchstart)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n                  (touchstart)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ","styles":["\n      :host {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        overflow: hidden;\n        padding: 5px;\n        text-align: center;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative;\n          width: 100%; }\n          :host > div .source-image {\n            max-width: 100%;\n            max-height: 100%; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid;\n          -ms-touch-action: none;\n              touch-action: none; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            display: inline-block;\n            line-height: 6px;\n            padding: 8px;\n            opacity: .85;\n            z-index: 1; }\n            :host .cropper .resize .square {\n              display: inline-block;\n              background: #53535C !important;\n              width: 6px;\n              height: 6px;\n              border: 1px solid rgba(255, 255, 255, 0.5); }\n            :host .cropper .resize.topleft {\n              top: -12px;\n              left: -12px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -12px;\n              left: calc(50% - 12px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -12px;\n              right: -12px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 12px);\n              right: -12px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: -12px;\n              right: -12px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: -12px;\n              left: calc(50% - 12px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: -12px;\n              left: -12px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 12px);\n              left: -12px;\n              cursor: w-resize; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 11px;\n              right: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 11px;\n              left: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: w-resize; }\n    "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"loadBase64Image":[{"__symbolic":"method"}],"imageLoadedInView":[{"__symbolic":"method"}],"imageResizedInView":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"resizeCropperPosition":[{"__symbolic":"method"}],"resetCropperPosition":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchend",["$event"]]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"getResizeRatio":[{"__symbolic":"method"}],"getClientX":[{"__symbolic":"method"}],"getClientY":[{"__symbolic":"method"}]}}},"origins":{"ImageCropperModule":"./src/image-cropper.module","ImageCropperComponent":"./src/image-cropper.component"},"importAs":"ngx-image-cropper"}
+{"__symbolic":"module","version":3,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"ImageCropperComponent"}],"exports":[{"__symbolic":"reference","name":"ImageCropperComponent"}]}]}],"members":{}},"ImageCropperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"image-cropper","template":"\n      <div>\n          <img\n              [src]=\"safeImgDataUrl\"\n              [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n              (load)=\"imageLoadedInView()\"\n              class=\"source-image\"\n          />\n          <div class=\"cropper\"\n               [style.top.px]=\"cropper.y1\"\n               [style.left.px]=\"cropper.x1\"\n               [style.width.px]=\"cropper.x2 - cropper.x1\"\n               [style.height.px]=\"cropper.y2 - cropper.y1\"\n               [style.margin-left]=\"marginLeft\"\n               [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n          >\n              <div\n                  (mousedown)=\"startMove($event, 'move')\"\n                  (touchstart)=\"startMove($event, 'move')\"\n                  class=\"move\"\n              >&nbsp;</div>\n              <span\n                  class=\"resize topleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'topleft')\"\n                  (touchstart)=\"startMove($event, 'resize', 'topleft')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize top\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize topright\"\n                  (mousedown)=\"startMove($event, 'resize', 'topright')\"\n                  (touchstart)=\"startMove($event, 'resize', 'topright')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize right\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottomright\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomright')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottomright')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottom\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize bottomleft\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottomleft')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottomleft')\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize left\"\n              ><span class=\"square\"></span></span>\n              <span\n                  class=\"resize-bar top\"\n                  (mousedown)=\"startMove($event, 'resize', 'top')\"\n                  (touchstart)=\"startMove($event, 'resize', 'top')\"\n              ></span>\n              <span\n                  class=\"resize-bar right\"\n                  (mousedown)=\"startMove($event, 'resize', 'right')\"\n                  (touchstart)=\"startMove($event, 'resize', 'right')\"\n              ></span>\n              <span\n                  class=\"resize-bar bottom\"\n                  (mousedown)=\"startMove($event, 'resize', 'bottom')\"\n                  (touchstart)=\"startMove($event, 'resize', 'bottom')\"\n              ></span>\n              <span\n                  class=\"resize-bar left\"\n                  (mousedown)=\"startMove($event, 'resize', 'left')\"\n                  (touchstart)=\"startMove($event, 'resize', 'left')\"\n              ></span>\n          </div>\n      </div>\n    ","styles":["\n      :host {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100%;\n        overflow: hidden;\n        padding: 5px;\n        text-align: center;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none; }\n        :host > div {\n          position: relative;\n          width: 100%; }\n          :host > div .source-image {\n            max-width: 100%;\n            max-height: 100%; }\n        :host .cropper {\n          position: absolute;\n          display: -webkit-box;\n          display: -ms-flexbox;\n          display: flex;\n          color: #53535C !important;\n          background: transparent !important;\n          outline-color: rgba(255, 255, 255, 0.3);\n          outline-width: 1000px;\n          outline-style: solid;\n          -ms-touch-action: none;\n              touch-action: none; }\n          :host .cropper:after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            pointer-events: none;\n            border: dashed 1px;\n            opacity: .75;\n            color: inherit;\n            z-index: 1; }\n          :host .cropper .move {\n            width: 100%;\n            cursor: move;\n            border: 1px solid rgba(255, 255, 255, 0.5); }\n          :host .cropper .resize {\n            position: absolute;\n            display: inline-block;\n            line-height: 6px;\n            padding: 8px;\n            opacity: .85;\n            z-index: 1; }\n            :host .cropper .resize .square {\n              display: inline-block;\n              background: #53535C !important;\n              width: 6px;\n              height: 6px;\n              border: 1px solid rgba(255, 255, 255, 0.5); }\n            :host .cropper .resize.topleft {\n              top: -12px;\n              left: -12px;\n              cursor: nw-resize; }\n            :host .cropper .resize.top {\n              top: -12px;\n              left: calc(50% - 12px);\n              cursor: n-resize; }\n            :host .cropper .resize.topright {\n              top: -12px;\n              right: -12px;\n              cursor: ne-resize; }\n            :host .cropper .resize.right {\n              top: calc(50% - 12px);\n              right: -12px;\n              cursor: e-resize; }\n            :host .cropper .resize.bottomright {\n              bottom: -12px;\n              right: -12px;\n              cursor: se-resize; }\n            :host .cropper .resize.bottom {\n              bottom: -12px;\n              left: calc(50% - 12px);\n              cursor: s-resize; }\n            :host .cropper .resize.bottomleft {\n              bottom: -12px;\n              left: -12px;\n              cursor: sw-resize; }\n            :host .cropper .resize.left {\n              top: calc(50% - 12px);\n              left: -12px;\n              cursor: w-resize; }\n          :host .cropper .resize-bar {\n            position: absolute;\n            z-index: 1; }\n            :host .cropper .resize-bar.top {\n              top: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: n-resize; }\n            :host .cropper .resize-bar.right {\n              top: 11px;\n              right: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: e-resize; }\n            :host .cropper .resize-bar.bottom {\n              bottom: -11px;\n              left: 11px;\n              width: calc(100% - 22px);\n              height: 22px;\n              cursor: s-resize; }\n            :host .cropper .resize-bar.left {\n              top: 11px;\n              left: -11px;\n              height: calc(100% - 22px);\n              width: 22px;\n              cursor: w-resize; }\n    "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"isValidImageType":[{"__symbolic":"method"}],"checkExifRotationAndLoadImage":[{"__symbolic":"method"}],"loadBase64Image":[{"__symbolic":"method"}],"imageLoadedInView":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"resizeCropperPosition":[{"__symbolic":"method"}],"resetCropperPosition":[{"__symbolic":"method"}],"startMove":[{"__symbolic":"method"}],"moveImg":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:touchend",["$event"]]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"getResizeRatio":[{"__symbolic":"method"}],"getClientX":[{"__symbolic":"method"}],"getClientY":[{"__symbolic":"method"}]}}},"origins":{"ImageCropperModule":"./src/image-cropper.module","ImageCropperComponent":"./src/image-cropper.component"},"importAs":"ngx-image-cropper"}

package.json

@@ -1,1 +0,1 @@
-{"name":"ngx-image-cropper","version":"0.2.7","description":"An image cropper for Angular","main":"bundles/ngx-image-cropper.umd.js","module":"ngx-image-cropper.es5.js","es2015":"ngx-image-cropper.js","scripts":{"transpile":"ngc","build":"ng-packagr -p ng-package.json","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist"},"typings":"ngx-image-cropper.d.ts","author":"Martijn Willekens","repository":{"type":"git","url":"https://github.com/Mawi137/ngx-image-cropper.git"},"bugs":{"url":"https://github.com/Mawi137/ngx-image-cropper/issues"},"homepage":"https://github.com/Mawi137/ngx-image-cropper","keywords":["angular","angular 2","angular 4","angular 5","image cropper"],"license":"MIT","peerDependencies":{"@angular/common":">=2.4.0","@angular/core":">=2.4.0","@angular/platform-browser":">=2.4.0"},"devDependencies":{"@angular/common":"^5.2.9","@angular/compiler":"^5.2.9","@angular/compiler-cli":"^5.2.9","@angular/core":"^5.2.9","@angular/platform-browser":"^5.2.9","ng-packagr":"^1.2.0","rxjs":"5.5.2","typescript":"2.4.2","zone.js":"0.8.14"},"metadata":"ngx-image-cropper.metadata.json"}
+{"name":"ngx-image-cropper","version":"0.2.8","description":"An image cropper for Angular","main":"bundles/ngx-image-cropper.umd.js","module":"ngx-image-cropper.es5.js","es2015":"ngx-image-cropper.js","scripts":{"transpile":"ngc","build":"ng-packagr -p ng-package.json","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist"},"typings":"ngx-image-cropper.d.ts","author":"Martijn Willekens","repository":{"type":"git","url":"https://github.com/Mawi137/ngx-image-cropper.git"},"bugs":{"url":"https://github.com/Mawi137/ngx-image-cropper/issues"},"homepage":"https://github.com/Mawi137/ngx-image-cropper","keywords":["angular","angular 2","angular 4","angular 5","image cropper"],"license":"MIT","peerDependencies":{"@angular/common":">=2.4.0","@angular/core":">=2.4.0","@angular/platform-browser":">=2.4.0"},"devDependencies":{"@angular/common":"^5.2.9","@angular/compiler":"^5.2.9","@angular/compiler-cli":"^5.2.9","@angular/core":"^5.2.9","@angular/platform-browser":"^5.2.9","ng-packagr":"^1.2.0","rxjs":"5.5.2","typescript":"2.4.2","zone.js":"0.8.14"},"metadata":"ngx-image-cropper.metadata.json"}

README.md

 # Image cropper for Angular
-![example](https://github.com/Mawi137/ngx-image-cropper/blob/master/cropper-example.png)
+![example](https://github.com/Mawi137/ngx-image-cropper/raw/master/cropper-example.png)
 
@@ -4,0 +4,0 @@ [StackBlitz](https://stackblitz.com/edit/image-cropper)

src/image-cropper.component.d.ts

@@ -36,5 +36,7 @@ import { ElementRef, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
     loadImage(event: any): void;
+    private isValidImageType(type);
+    private checkExifRotationAndLoadImage(imageBase64);
     private loadBase64Image(imageBase64);
     imageLoadedInView(): void;
-    imageResizedInView(event: Event): void;
+    onResize(event: Event): void;
     private resizeCropperPosition();
@@ -41,0 +43,0 @@ private resetCropperPosition();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

362215

increased by16.88%

Number of package files

16

increased by6.67%

Lines of code

2300

increased by24.19%

No dependency changes