ngx-image-cropper - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

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("ngx-image-cropper",["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e((t=t||self)["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,(function(t,e,i,r){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var s="data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==";function a(t){switch("string"==typeof t&&(t=function(t){var e=new DataView(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));if(65496!=e.getUint16(0,!1))return-2;var i=e.byteLength,r=2;for(;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 p=0;p<a;p++)if(274==e.getUint16(r+12*p,s))return e.getUint16(r+12*p+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1}(t)),t){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}var p={Move:"move",Resize:"resize",Pinch:"pinch"},h=function(){function t(t,i){this.sanitizer=t,this.cd=i,this.Hammer="undefined"!=typeof window?window.Hammer:null,this.setImageMaxSizeRetries=0,this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20,this.exifTransform={rotate:0,flip:!1},this.autoRotateSupported=new Promise((function(t){var e=new Image;e.onload=function(){var i=1===e.width&&2===e.height;t(i)},e.src=s})),this.stepSize=3,this.marginLeft="0px",this.imageVisible=!1,this.moveTypes=p,this.format="png",this.maintainAspectRatio=!0,this.transform={},this.aspectRatio=1,this.resizeToWidth=0,this.resizeToHeight=0,this.cropperMinWidth=0,this.cropperMinHeight=0,this.cropperStaticWidth=0,this.cropperStaticHeight=0,this.canvasRotation=0,this.initialStepSize=3,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.autoCrop=!0,this.containWithinAspectRatio=!1,this.hideResizeSquares=!1,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.alignImage="center",this.disabled=!1,this.imageCropped=new e.EventEmitter,this.startCropImage=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.cropperReady=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return t.prototype.ngOnChanges=function(t){this.cropperStaticHeight&&this.cropperStaticWidth&&(this.hideResizeSquares=!0,this.cropperMinWidth=this.cropperStaticWidth,this.cropperMinHeight=this.cropperStaticHeight,this.maintainAspectRatio=!1),this.onChangesInputImage(t),this.originalImage&&this.originalImage.complete&&this.exifTransform&&(t.containWithinAspectRatio||t.canvasRotation)&&this.transformOriginalImage(),t.cropper&&(this.setMaxSize(),this.setCropperScaledMinSize(),this.checkCropperPosition(!1),this.doAutoCrop(),this.cd.markForCheck()),t.aspectRatio&&this.imageVisible&&this.resetCropperPosition(),t.transform&&(this.transform=this.transform||{},this.setCssTransform(),this.doAutoCrop())},t.prototype.onChangesInputImage=function(t){(t.imageChangedEvent||t.imageURL||t.imageBase64||t.imageFile)&&this.initCropper(),t.imageChangedEvent&&this.isValidImageChangedEvent()&&this.loadImageFile(this.imageChangedEvent.target.files[0]),t.imageURL&&this.imageURL&&this.loadImageFromURL(this.imageURL),t.imageBase64&&this.imageBase64&&this.loadBase64Image(this.imageBase64),t.imageFile&&this.imageFile&&this.loadImageFile(this.imageFile)},t.prototype.isValidImageChangedEvent=function(){return this.imageChangedEvent&&this.imageChangedEvent.target&&this.imageChangedEvent.target.files&&this.imageChangedEvent.target.files.length>0},t.prototype.setCssTransform=function(){this.safeTransformStyle=this.sanitizer.bypassSecurityTrustStyle("scaleX("+(this.transform.scale||1)*(this.transform.flipH?-1:1)+")scaleY("+(this.transform.scale||1)*(this.transform.flipV?-1:1)+")rotate("+(this.transform.rotate||0)+"deg)")},t.prototype.ngOnInit=function(){this.stepSize=this.initialStepSize,this.activatePinchGesture()},t.prototype.initCropper=function(){this.imageVisible=!1,this.transformedImage=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.transformedSize={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,e){this.isValidImageType(e)?this.loadBase64Image(t):this.loadImageFailed.emit()},t.prototype.loadImageFile=function(t){var e=this,i=new FileReader;i.onload=function(i){return e.loadImage(i.target.result,t.type)},i.readAsDataURL(t)},t.prototype.isValidImageType=function(t){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(t)},t.prototype.loadBase64Image=function(t){var e=this;this.autoRotateSupported.then((function(i){return e.checkExifAndLoadBase64Image(t,i)})).then((function(){return e.transformOriginalImage()})).catch((function(t){e.loadImageFailed.emit(),e.originalImage=null,e.originalBase64=null,console.error(t)}))},t.prototype.checkExifAndLoadBase64Image=function(t,e){var i=this;return new Promise((function(r,o){i.originalImage=new Image,i.originalImage.onload=function(){i.originalBase64=t,i.exifTransform=a(e?-1:t),i.originalSize.width=i.originalImage.naturalWidth,i.originalSize.height=i.originalImage.naturalHeight,r()},i.originalImage.onerror=o,i.originalImage.src=t}))},t.prototype.loadImageFromURL=function(t){var e=this,i=new Image;i.onerror=function(){return e.loadImageFailed.emit()},i.onload=function(){var t=document.createElement("canvas"),r=t.getContext("2d");t.width=i.width,t.height=i.height,r.drawImage(i,0,0),e.loadBase64Image(t.toDataURL())},i.crossOrigin="anonymous",i.src=t},t.prototype.transformOriginalImage=function(){if(!this.originalImage||!this.originalImage.complete||!this.exifTransform)return Promise.reject(new Error("No image loaded"));var t=this.transformImageBase64();return this.setTransformedImage(t)},t.prototype.transformImageBase64=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(0===t&&!this.exifTransform.flip&&!this.containWithinAspectRatio)return this.originalBase64;var e=this.getTransformedSize(),i=document.createElement("canvas");i.width=e.width,i.height=e.height;var r=i.getContext("2d");return r.setTransform(this.exifTransform.flip?-1:1,0,0,1,i.width/2,i.height/2),r.rotate(Math.PI*(t/2)),r.drawImage(this.originalImage,-this.originalSize.width/2,-this.originalSize.height/2),i.toDataURL()},t.prototype.getTransformedSize=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(this.containWithinAspectRatio){if(t%2){var e=this.originalSize.width*this.aspectRatio,i=this.originalSize.height/this.aspectRatio;return{width:Math.max(this.originalSize.height,e),height:Math.max(this.originalSize.width,i)}}e=this.originalSize.height*this.aspectRatio,i=this.originalSize.width/this.aspectRatio;return{width:Math.max(this.originalSize.width,e),height:Math.max(this.originalSize.height,i)}}return t%2?{height:this.originalSize.width,width:this.originalSize.height}:{width:this.originalSize.width,height:this.originalSize.height}},t.prototype.setTransformedImage=function(t){var e=this;return new Promise((function(i){e.transformedBase64=t,e.safeImgDataUrl=e.sanitizer.bypassSecurityTrustResourceUrl(t),e.transformedImage=new Image,e.transformedImage.onload=function(){e.transformedSize.width=e.transformedImage.naturalWidth,e.transformedSize.height=e.transformedImage.naturalHeight,e.cd.markForCheck(),i()},e.transformedImage.src=e.transformedBase64}))},t.prototype.imageLoadedInView=function(){var t=this;null!=this.transformedImage&&(this.imageLoaded.emit(),this.setImageMaxSizeRetries=0,setTimeout((function(){return t.checkImageMaxSizeRecursively()})))},t.prototype.checkImageMaxSizeRecursively=function(){var t=this;this.setImageMaxSizeRetries>40?this.loadImageFailed.emit():this.sourceImageLoaded()?(this.setMaxSize(),this.setCropperScaledMinSize(),this.resetCropperPosition(),this.cropperReady.emit(o({},this.maxSize)),this.cd.markForCheck()):(this.setImageMaxSizeRetries++,setTimeout((function(){return t.checkImageMaxSizeRecursively()}),50))},t.prototype.sourceImageLoaded=function(){return this.sourceImage&&this.sourceImage.nativeElement&&this.sourceImage.nativeElement.offsetWidth>0},t.prototype.onResize=function(){this.resizeCropperPosition(),this.setMaxSize(),this.setCropperScaledMinSize()},t.prototype.activatePinchGesture=function(){if(this.Hammer){var t=new this.Hammer(this.wrapper.nativeElement);t.get("pinch").set({enable:!0}),t.on("pinchmove",this.onPinch.bind(this)),t.on("pinchend",this.pinchStop.bind(this)),t.on("pinchstart",this.startPinch.bind(this))}else e.isDevMode()&&console.warn("[NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work")},t.prototype.resizeCropperPosition=function(){var t=this.sourceImage.nativeElement;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.sourceImage.nativeElement;if(this.cropperStaticHeight&&this.cropperStaticWidth)this.cropper.x1=0,this.cropper.x2=t.offsetWidth>this.cropperStaticWidth?this.cropperStaticWidth:t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight>this.cropperStaticHeight?this.cropperStaticHeight:t.offsetHeight;else if(this.maintainAspectRatio)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}else this.cropper.x1=0,this.cropper.x2=t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight;this.doAutoCrop(),this.imageVisible=!0},t.prototype.keyboardAccess=function(t){this.changeKeyboardStepSize(t),this.keyboardMoveCropper(t)},t.prototype.changeKeyboardStepSize=function(t){t.key>="1"&&t.key<="9"&&(this.stepSize=+t.key)},t.prototype.keyboardMoveCropper=function(t){if(["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(t.key)){var e=t.shiftKey?p.Resize:p.Move,i=t.altKey?this.getInvertedPositionForKey(t.key):this.getPositionForKey(t.key),r=this.getEventForKey(t.key,this.stepSize);t.preventDefault(),t.stopPropagation(),this.startMove({clientX:0,clientY:0},e,i),this.moveImg(r),this.moveStop()}},t.prototype.getPositionForKey=function(t){switch(t){case"ArrowUp":return"top";case"ArrowRight":return"right";case"ArrowDown":return"bottom";case"ArrowLeft":default:return"left"}},t.prototype.getInvertedPositionForKey=function(t){switch(t){case"ArrowUp":return"bottom";case"ArrowRight":return"left";case"ArrowDown":return"top";case"ArrowLeft":default:return"right"}},t.prototype.getEventForKey=function(t,e){switch(t){case"ArrowUp":return{clientX:0,clientY:-1*e};case"ArrowRight":return{clientX:e,clientY:0};case"ArrowDown":return{clientX:0,clientY:e};case"ArrowLeft":default:return{clientX:-1*e,clientY:0}}},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart&&this.moveStart.active&&this.moveStart.type===p.Pinch||(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:e,position:i,clientX:this.getClientX(t),clientY:this.getClientY(t)},this.cropper))},t.prototype.startPinch=function(t){this.safeImgDataUrl&&(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:p.Pinch,position:"center",clientX:this.cropper.x1+(this.cropper.x2-this.cropper.x1)/2,clientY:this.cropper.y1+(this.cropper.y2-this.cropper.y1)/2},this.cropper))},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Move?(this.move(t),this.checkCropperPosition(!0)):this.moveStart.type===p.Resize&&(this.cropperStaticWidth||this.cropperStaticHeight||this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.onPinch=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===p.Pinch&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.setMaxSize=function(){if(this.sourceImage){var t=this.sourceImage.nativeElement;this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")}},t.prototype.setCropperScaledMinSize=function(){this.transformedImage?(this.setCropperScaledMinWidth(),this.setCropperScaledMinHeight()):(this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20)},t.prototype.setCropperScaledMinWidth=function(){this.cropperScaledMinWidth=this.cropperMinWidth>0?Math.max(20,this.cropperMinWidth/this.transformedImage.width*this.maxSize.width):20},t.prototype.setCropperScaledMinHeight=function(){this.maintainAspectRatio?this.cropperScaledMinHeight=Math.max(20,this.cropperScaledMinWidth/this.aspectRatio):this.cropperMinHeight>0?this.cropperScaledMinHeight=Math.max(20,this.cropperMinHeight/this.transformedImage.height*this.maxSize.height):this.cropperScaledMinHeight=20},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(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.pinchStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},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-this.cropperScaledMinWidth);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"center":var r=t.scale,o=Math.abs(this.moveStart.x2-this.moveStart.x1)*r,s=Math.abs(this.moveStart.y2-this.moveStart.y1)*r,a=this.cropper.x1,p=this.cropper.y1;this.cropper.x1=Math.min(this.moveStart.clientX-o/2,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.clientY-s/2,this.cropper.y2-this.cropperScaledMinHeight),this.cropper.x2=Math.max(this.moveStart.clientX+o/2,a+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.clientY+s/2,p+this.cropperScaledMinHeight)}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);break;case"center":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio;var i=Math.max(0-this.cropper.x1,0),r=Math.max(this.cropper.x2-this.maxSize.width,0),o=Math.max(this.cropper.y2-this.maxSize.height,0),s=Math.max(0-this.cropper.y1,0);(i>0||r>0||o>0||s>0)&&(this.cropper.x1+=o*this.aspectRatio>i?o*this.aspectRatio:i,this.cropper.x2-=s*this.aspectRatio>r?s*this.aspectRatio:r,this.cropper.y1+=s*this.aspectRatio>r?s:r/this.aspectRatio,this.cropper.y2-=o*this.aspectRatio>i?o:i/this.aspectRatio)}},t.prototype.doAutoCrop=function(){this.autoCrop&&this.crop()},t.prototype.crop=function(){if(this.sourceImage&&this.sourceImage.nativeElement&&null!=this.transformedImage){this.startCropImage.emit();var t=this.getImagePosition(),e=t.x2-t.x1,i=t.y2-t.y1,r=document.createElement("canvas");r.width=e,r.height=i;var s=r.getContext("2d");if(s){null!=this.backgroundColor&&(s.fillStyle=this.backgroundColor,s.fillRect(0,0,e,i));var a=(this.transform.scale||1)*(this.transform.flipH?-1:1),p=(this.transform.scale||1)*(this.transform.flipV?-1:1);s.setTransform(a,0,0,p,this.transformedSize.width/2,this.transformedSize.height/2),s.translate(-t.x1/a,-t.y1/p),s.rotate((this.transform.rotate||0)*Math.PI/180),s.drawImage(this.transformedImage,-this.transformedSize.width/2,-this.transformedSize.height/2);var h={width:e,height:i,imagePosition:t,cropperPosition:o({},this.cropper)};this.containWithinAspectRatio&&(h.offsetImagePosition=this.getOffsetImagePosition());var n=this.getResizeRatio(e,i);return 1!==n&&(h.width=Math.round(e*n),h.height=this.maintainAspectRatio?Math.round(h.width/this.aspectRatio):Math.round(i*n),function(t,e,i){var r=t.width,o=t.height,s=r/(e=Math.round(e)),a=o/(i=Math.round(i)),p=Math.ceil(s/2),h=Math.ceil(a/2),n=t.getContext("2d");if(n){for(var c=n.getImageData(0,0,r,o),m=n.createImageData(e,i),g=c.data,l=m.data,d=0;d<i;d++)for(var u=0;u<e;u++){var f=4*(u+d*e),y=d*a,v=0,x=0,A=0,S=0,z=0,w=0,M=0,I=Math.floor(u*s),b=Math.floor(d*a),R=Math.ceil((u+1)*s),E=Math.ceil((d+1)*a);R=Math.min(R,r),E=Math.min(E,o);for(var C=b;C<E;C++)for(var B=Math.abs(y-C)/h,H=u*s,T=B*B,Q=I;Q<R;Q++){var W=Math.abs(H-Q)/p,k=Math.sqrt(T+W*W);if(!(k>=1)){var P=4*(Q+C*r);M+=(v=2*k*k*k-3*k*k+1)*g[P+3],A+=v,g[P+3]<255&&(v=v*g[P+3]/250),S+=v*g[P],z+=v*g[P+1],w+=v*g[P+2],x+=v}}l[f]=S/x,l[f+1]=z/x,l[f+2]=w/x,l[f+3]=M/A}t.width=e,t.height=i,n.putImageData(m,0,0)}}(r,h.width,h.height)),h.base64=this.cropToBase64(r),this.imageCropped.emit(h),h}}return null},t.prototype.getImagePosition=function(){var t=this.sourceImage.nativeElement,e=this.transformedSize.width/t.offsetWidth,i={x1:Math.round(this.cropper.x1*e),y1:Math.round(this.cropper.y1*e),x2:Math.round(this.cropper.x2*e),y2:Math.round(this.cropper.y2*e)};return this.containWithinAspectRatio||(i.x1=Math.max(i.x1,0),i.y1=Math.max(i.y1,0),i.x2=Math.min(i.x2,this.transformedSize.width),i.y2=Math.min(i.y2,this.transformedSize.height)),i},t.prototype.getOffsetImagePosition=function(){var t,e,i=this.canvasRotation+this.exifTransform.rotate,r=this.sourceImage.nativeElement,o=this.transformedSize.width/r.offsetWidth;i%2?(t=(this.transformedSize.width-this.originalSize.height)/2,e=(this.transformedSize.height-this.originalSize.width)/2):(t=(this.transformedSize.width-this.originalSize.width)/2,e=(this.transformedSize.height-this.originalSize.height)/2);var s={x1:Math.round(this.cropper.x1*o)-t,y1:Math.round(this.cropper.y1*o)-e,x2:Math.round(this.cropper.x2*o)-t,y2:Math.round(this.cropper.y2*o)-e};return this.containWithinAspectRatio||(s.x1=Math.max(s.x1,0),s.y1=Math.max(s.y1,0),s.x2=Math.min(s.x2,this.transformedSize.width),s.y2=Math.min(s.y2,this.transformedSize.height)),s},t.prototype.cropToBase64=function(t){return t.toDataURL("image/"+this.format,this.getQuality())},t.prototype.getQuality=function(){return Math.min(1,Math.max(0,this.imageQuality/100))},t.prototype.getResizeRatio=function(t,e){if(this.resizeToWidth>0){if(!this.onlyScaleDown||t>this.resizeToWidth)return this.resizeToWidth/t}else if(this.resizeToHeight>0&&(!this.onlyScaleDown||e>this.resizeToHeight))return this.resizeToHeight/e;return 1},t.prototype.getClientX=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientX:t.clientX)||0},t.prototype.getClientY=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientY:t.clientY)||0},t.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'<div [style.background]="imageVisible && backgroundColor"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class="source-image"\n      *ngIf="safeImgDataUrl"\n      [src]="safeImgDataUrl"\n      [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n      [style.transform]="safeTransformStyle"\n      (load)="imageLoadedInView()"\n    />\n    <div\n        class="overlay"\n        [style.width.px]="maxSize.width"\n        [style.height.px]="maxSize.height"\n        [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n    ></div>\n    <div class="cropper"\n         *ngIf="imageVisible"\n         [class.rounded]="roundCropper"\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]="alignImage === \'center\' ? marginLeft : null"\n         [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n         (keydown)="keyboardAccess($event)"\n         tabindex="0"\n    >\n        <div\n            (mousedown)="startMove($event, moveTypes.Move)"\n            (touchstart)="startMove($event, moveTypes.Move)"\n            class="move">\n        </div>\n        <ng-container *ngIf="!hideResizeSquares">\n            <span class="resize topleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize top">\n                <span class="square"></span>\n            </span>\n            <span class="resize topright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize right">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottom">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize left">\n                <span class="square"></span>\n            </span>\n            <span class="resize-bar top"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'top\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'top\')">\n            </span>\n            <span class="resize-bar right"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'right\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'right\')">\n            </span>\n            <span class="resize-bar bottom"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottom\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottom\')">\n            </span>\n            <span class="resize-bar left"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'left\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'left\')">\n            </span>\n        </ng-container>\n    </div>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[':host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color,#fff) solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:"";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}']}]}],t.ctorParameters=function(){return[{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},t.propDecorators={wrapper:[{type:e.ViewChild,args:["wrapper",{static:!0}]}],sourceImage:[{type:e.ViewChild,args:["sourceImage",{static:!1}]}],imageChangedEvent:[{type:e.Input}],imageURL:[{type:e.Input}],imageBase64:[{type:e.Input}],imageFile:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],transform:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],resizeToHeight:[{type:e.Input}],cropperMinWidth:[{type:e.Input}],cropperMinHeight:[{type:e.Input}],cropperStaticWidth:[{type:e.Input}],cropperStaticHeight:[{type:e.Input}],canvasRotation:[{type:e.Input}],initialStepSize:[{type:e.Input}],roundCropper:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],autoCrop:[{type:e.Input}],backgroundColor:[{type:e.Input}],containWithinAspectRatio:[{type:e.Input}],hideResizeSquares:[{type:e.Input}],cropper:[{type:e.Input}],alignImage:[{type:e.HostBinding,args:["style.text-align"]},{type:e.Input}],disabled:[{type:e.HostBinding,args:["class.disabled"]},{type:e.Input}],imageCropped:[{type:e.Output}],startCropImage:[{type:e.Output}],imageLoaded:[{type:e.Output}],cropperReady:[{type:e.Output}],loadImageFailed:[{type:e.Output}],onResize:[{type:e.HostListener,args:["window:resize"]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup"]},{type:e.HostListener,args:["document:touchend"]}]},t}();var n=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[h],exports:[h]}]}],t}();t.ImageCropperComponent=h,t.ImageCropperModule=n,t.base64ToFile=function(t){for(var e=t.split(","),i=e[0].replace("data:","").replace(";base64",""),r=atob(e[1]),o=new ArrayBuffer(r.length),s=new Uint8Array(o),a=0;a<r.length;a+=1)s[a]=r.charCodeAt(a);return new Blob([o],{type:i})},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("ngx-image-cropper",["exports","@angular/core","@angular/common","@angular/platform-browser"],e):e((t=t||self)["ngx-image-cropper"]={},t.ng.core,t.ng.common,t.ng.platformBrowser)}(this,(function(t,e,i,r){"use strict";var o=function(){return(o=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function s(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var r,o,s=i.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(r=s.next()).done;)a.push(r.value)}catch(t){o={error:t}}finally{try{r&&!r.done&&(i=s.return)&&i.call(s)}finally{if(o)throw o.error}}return a}var a="data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==";function p(t){switch("string"==typeof t&&(t=function(t){var e=new DataView(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));if(65496!=e.getUint16(0,!1))return-2;var i=e.byteLength,r=2;for(;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 p=0;p<a;p++)if(274==e.getUint16(r+12*p,s))return e.getUint16(r+12*p+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1}(t)),t){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}var h={Move:"move",Resize:"resize",Pinch:"pinch"},n=function(){function t(t,i){this.sanitizer=t,this.cd=i,this.Hammer="undefined"!=typeof window?window.Hammer:null,this.setImageMaxSizeRetries=0,this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20,this.exifTransform={rotate:0,flip:!1},this.autoRotateSupported=new Promise((function(t){var e=new Image;e.onload=function(){var i=1===e.width&&2===e.height;t(i)},e.src=a})),this.stepSize=3,this.marginLeft="0px",this.imageVisible=!1,this.moveTypes=h,this.format="png",this.maintainAspectRatio=!0,this.transform={},this.aspectRatio=1,this.resizeToWidth=0,this.resizeToHeight=0,this.cropperMinWidth=0,this.cropperMinHeight=0,this.cropperStaticWidth=0,this.cropperStaticHeight=0,this.canvasRotation=0,this.initialStepSize=3,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.autoCrop=!0,this.containWithinAspectRatio=!1,this.hideResizeSquares=!1,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.alignImage="center",this.disabled=!1,this.imageCropped=new e.EventEmitter,this.startCropImage=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.cropperReady=new e.EventEmitter,this.loadImageFailed=new e.EventEmitter,this.initCropper()}return t.prototype.ngOnChanges=function(t){this.cropperStaticHeight&&this.cropperStaticWidth&&(this.hideResizeSquares=!0,this.cropperMinWidth=this.cropperStaticWidth,this.cropperMinHeight=this.cropperStaticHeight,this.maintainAspectRatio=!1),this.onChangesInputImage(t),this.originalImage&&this.originalImage.complete&&this.exifTransform&&(t.containWithinAspectRatio||t.canvasRotation)&&this.transformOriginalImage(),t.cropper&&(this.setMaxSize(),this.setCropperScaledMinSize(),this.checkCropperPosition(!1),this.doAutoCrop(),this.cd.markForCheck()),t.aspectRatio&&this.imageVisible&&this.resetCropperPosition(),t.transform&&(this.transform=this.transform||{},this.setCssTransform(),this.doAutoCrop())},t.prototype.onChangesInputImage=function(t){(t.imageChangedEvent||t.imageURL||t.imageBase64||t.imageFile)&&this.initCropper(),t.imageChangedEvent&&this.isValidImageChangedEvent()&&this.loadImageFile(this.imageChangedEvent.target.files[0]),t.imageURL&&this.imageURL&&this.loadImageFromURL(this.imageURL),t.imageBase64&&this.imageBase64&&this.loadBase64Image(this.imageBase64),t.imageFile&&this.imageFile&&this.loadImageFile(this.imageFile)},t.prototype.isValidImageChangedEvent=function(){return this.imageChangedEvent&&this.imageChangedEvent.target&&this.imageChangedEvent.target.files&&this.imageChangedEvent.target.files.length>0},t.prototype.setCssTransform=function(){this.safeTransformStyle=this.sanitizer.bypassSecurityTrustStyle("scaleX("+(this.transform.scale||1)*(this.transform.flipH?-1:1)+")scaleY("+(this.transform.scale||1)*(this.transform.flipV?-1:1)+")rotate("+(this.transform.rotate||0)+"deg)")},t.prototype.ngOnInit=function(){this.stepSize=this.initialStepSize,this.activatePinchGesture()},t.prototype.initCropper=function(){this.imageVisible=!1,this.transformedImage=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.transformedSize={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,e){this.isValidImageType(e)?this.loadBase64Image(t):this.loadImageFailed.emit()},t.prototype.loadImageFile=function(t){var e=this,i=new FileReader;i.onload=function(i){return e.loadImage(i.target.result,t.type)},i.readAsDataURL(t)},t.prototype.isValidImageType=function(t){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(t)},t.prototype.loadBase64Image=function(t){var e=this;this.autoRotateSupported.then((function(i){return e.checkExifAndLoadBase64Image(t,i)})).then((function(){return e.transformOriginalImage()})).catch((function(t){e.loadImageFailed.emit(),e.originalImage=null,e.originalBase64=null,console.error(t)}))},t.prototype.checkExifAndLoadBase64Image=function(t,e){var i=this;return new Promise((function(r,o){i.originalImage=new Image,i.originalImage.onload=function(){i.originalBase64=t,i.exifTransform=p(e?-1:t),i.originalSize.width=i.originalImage.naturalWidth,i.originalSize.height=i.originalImage.naturalHeight,r()},i.originalImage.onerror=o,i.originalImage.src=t}))},t.prototype.loadImageFromURL=function(t){var e=this,i=new Image;i.onerror=function(){return e.loadImageFailed.emit()},i.onload=function(){var t=document.createElement("canvas"),r=t.getContext("2d");t.width=i.width,t.height=i.height,r.drawImage(i,0,0),e.loadBase64Image(t.toDataURL())},i.crossOrigin="anonymous",i.src=t},t.prototype.transformOriginalImage=function(){if(!this.originalImage||!this.originalImage.complete||!this.exifTransform)return Promise.reject(new Error("No image loaded"));var t=this.transformImageBase64();return this.setTransformedImage(t)},t.prototype.transformImageBase64=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(0===t&&!this.exifTransform.flip&&!this.containWithinAspectRatio)return this.originalBase64;var e=this.getTransformedSize(),i=document.createElement("canvas");i.width=e.width,i.height=e.height;var r=i.getContext("2d");return r.setTransform(this.exifTransform.flip?-1:1,0,0,1,i.width/2,i.height/2),r.rotate(Math.PI*(t/2)),r.drawImage(this.originalImage,-this.originalSize.width/2,-this.originalSize.height/2),i.toDataURL()},t.prototype.getTransformedSize=function(){var t=this.canvasRotation+this.exifTransform.rotate;if(this.containWithinAspectRatio){if(t%2){var e=this.originalSize.width*this.aspectRatio,i=this.originalSize.height/this.aspectRatio;return{width:Math.max(this.originalSize.height,e),height:Math.max(this.originalSize.width,i)}}e=this.originalSize.height*this.aspectRatio,i=this.originalSize.width/this.aspectRatio;return{width:Math.max(this.originalSize.width,e),height:Math.max(this.originalSize.height,i)}}return t%2?{height:this.originalSize.width,width:this.originalSize.height}:{width:this.originalSize.width,height:this.originalSize.height}},t.prototype.setTransformedImage=function(t){var e=this;return new Promise((function(i){e.transformedBase64=t,e.safeImgDataUrl=e.sanitizer.bypassSecurityTrustResourceUrl(t),e.transformedImage=new Image,e.transformedImage.onload=function(){e.transformedSize.width=e.transformedImage.naturalWidth,e.transformedSize.height=e.transformedImage.naturalHeight,e.cd.markForCheck(),i()},e.transformedImage.src=e.transformedBase64}))},t.prototype.imageLoadedInView=function(){var t=this;null!=this.transformedImage&&(this.imageLoaded.emit(),this.setImageMaxSizeRetries=0,setTimeout((function(){return t.checkImageMaxSizeRecursively()})))},t.prototype.checkImageMaxSizeRecursively=function(){var t=this;this.setImageMaxSizeRetries>40?this.loadImageFailed.emit():this.sourceImageLoaded()?(this.setMaxSize(),this.setCropperScaledMinSize(),this.resetCropperPosition(),this.cropperReady.emit(o({},this.maxSize)),this.cd.markForCheck()):(this.setImageMaxSizeRetries++,setTimeout((function(){return t.checkImageMaxSizeRecursively()}),50))},t.prototype.sourceImageLoaded=function(){return this.sourceImage&&this.sourceImage.nativeElement&&this.sourceImage.nativeElement.offsetWidth>0},t.prototype.onResize=function(){this.resizeCropperPosition(),this.setMaxSize(),this.setCropperScaledMinSize()},t.prototype.activatePinchGesture=function(){if(this.Hammer){var t=new this.Hammer(this.wrapper.nativeElement);t.get("pinch").set({enable:!0}),t.on("pinchmove",this.onPinch.bind(this)),t.on("pinchend",this.pinchStop.bind(this)),t.on("pinchstart",this.startPinch.bind(this))}else e.isDevMode()&&console.warn("[NgxImageCropper] Could not find HammerJS - Pinch Gesture won't work")},t.prototype.resizeCropperPosition=function(){var t=this.sourceImage.nativeElement;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.sourceImage.nativeElement;if(this.cropperStaticHeight&&this.cropperStaticWidth)this.cropper.x1=0,this.cropper.x2=t.offsetWidth>this.cropperStaticWidth?this.cropperStaticWidth:t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight>this.cropperStaticHeight?this.cropperStaticHeight:t.offsetHeight;else if(this.maintainAspectRatio)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}else this.cropper.x1=0,this.cropper.x2=t.offsetWidth,this.cropper.y1=0,this.cropper.y2=t.offsetHeight;this.doAutoCrop(),this.imageVisible=!0},t.prototype.keyboardAccess=function(t){this.changeKeyboardStepSize(t),this.keyboardMoveCropper(t)},t.prototype.changeKeyboardStepSize=function(t){t.key>="1"&&t.key<="9"&&(this.stepSize=+t.key)},t.prototype.keyboardMoveCropper=function(t){if(["ArrowUp","ArrowDown","ArrowRight","ArrowLeft"].includes(t.key)){var e=t.shiftKey?h.Resize:h.Move,i=t.altKey?this.getInvertedPositionForKey(t.key):this.getPositionForKey(t.key),r=this.getEventForKey(t.key,this.stepSize);t.preventDefault(),t.stopPropagation(),this.startMove({clientX:0,clientY:0},e,i),this.moveImg(r),this.moveStop()}},t.prototype.getPositionForKey=function(t){switch(t){case"ArrowUp":return"top";case"ArrowRight":return"right";case"ArrowDown":return"bottom";case"ArrowLeft":default:return"left"}},t.prototype.getInvertedPositionForKey=function(t){switch(t){case"ArrowUp":return"bottom";case"ArrowRight":return"left";case"ArrowDown":return"top";case"ArrowLeft":default:return"right"}},t.prototype.getEventForKey=function(t,e){switch(t){case"ArrowUp":return{clientX:0,clientY:-1*e};case"ArrowRight":return{clientX:e,clientY:0};case"ArrowDown":return{clientX:0,clientY:e};case"ArrowLeft":default:return{clientX:-1*e,clientY:0}}},t.prototype.startMove=function(t,e,i){void 0===i&&(i=null),this.moveStart&&this.moveStart.active&&this.moveStart.type===h.Pinch||(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:e,position:i,clientX:this.getClientX(t),clientY:this.getClientY(t)},this.cropper))},t.prototype.startPinch=function(t){this.safeImgDataUrl&&(t.preventDefault&&t.preventDefault(),this.moveStart=o({active:!0,type:h.Pinch,position:"center",clientX:this.cropper.x1+(this.cropper.x2-this.cropper.x1)/2,clientY:this.cropper.y1+(this.cropper.y2-this.cropper.y1)/2},this.cropper))},t.prototype.moveImg=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===h.Move?(this.move(t),this.checkCropperPosition(!0)):this.moveStart.type===h.Resize&&(this.cropperStaticWidth||this.cropperStaticHeight||this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.onPinch=function(t){this.moveStart.active&&(t.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),this.moveStart.type===h.Pinch&&(this.resize(t),this.checkCropperPosition(!1)),this.cd.detectChanges())},t.prototype.setMaxSize=function(){if(this.sourceImage){var t=this.sourceImage.nativeElement;this.maxSize.width=t.offsetWidth,this.maxSize.height=t.offsetHeight,this.marginLeft=this.sanitizer.bypassSecurityTrustStyle("calc(50% - "+this.maxSize.width/2+"px)")}},t.prototype.setCropperScaledMinSize=function(){this.transformedImage?(this.setCropperScaledMinWidth(),this.setCropperScaledMinHeight()):(this.cropperScaledMinWidth=20,this.cropperScaledMinHeight=20)},t.prototype.setCropperScaledMinWidth=function(){this.cropperScaledMinWidth=this.cropperMinWidth>0?Math.max(20,this.cropperMinWidth/this.transformedImage.width*this.maxSize.width):20},t.prototype.setCropperScaledMinHeight=function(){this.maintainAspectRatio?this.cropperScaledMinHeight=Math.max(20,this.cropperScaledMinWidth/this.aspectRatio):this.cropperMinHeight>0?this.cropperScaledMinHeight=Math.max(20,this.cropperMinHeight/this.transformedImage.height*this.maxSize.height):this.cropperScaledMinHeight=20},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(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},t.prototype.pinchStop=function(){this.moveStart.active&&(this.moveStart.active=!1,this.doAutoCrop())},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-this.cropperScaledMinWidth);break;case"topleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"top":this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"topright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.y1+i,this.cropper.y2-this.cropperScaledMinHeight);break;case"right":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth);break;case"bottomright":this.cropper.x2=Math.max(this.moveStart.x2+e,this.cropper.x1+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottom":this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"bottomleft":this.cropper.x1=Math.min(this.moveStart.x1+e,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.y2+i,this.cropper.y1+this.cropperScaledMinHeight);break;case"center":var r=t.scale,o=Math.abs(this.moveStart.x2-this.moveStart.x1)*r,s=Math.abs(this.moveStart.y2-this.moveStart.y1)*r,a=this.cropper.x1,p=this.cropper.y1;this.cropper.x1=Math.min(this.moveStart.clientX-o/2,this.cropper.x2-this.cropperScaledMinWidth),this.cropper.y1=Math.min(this.moveStart.clientY-s/2,this.cropper.y2-this.cropperScaledMinHeight),this.cropper.x2=Math.max(this.moveStart.clientX+o/2,a+this.cropperScaledMinWidth),this.cropper.y2=Math.max(this.moveStart.clientY+s/2,p+this.cropperScaledMinHeight)}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);break;case"center":this.cropper.x2=this.cropper.x1+(this.cropper.y2-this.cropper.y1)*this.aspectRatio,this.cropper.y2=this.cropper.y1+(this.cropper.x2-this.cropper.x1)/this.aspectRatio;var i=Math.max(0-this.cropper.x1,0),r=Math.max(this.cropper.x2-this.maxSize.width,0),o=Math.max(this.cropper.y2-this.maxSize.height,0),s=Math.max(0-this.cropper.y1,0);(i>0||r>0||o>0||s>0)&&(this.cropper.x1+=o*this.aspectRatio>i?o*this.aspectRatio:i,this.cropper.x2-=s*this.aspectRatio>r?s*this.aspectRatio:r,this.cropper.y1+=s*this.aspectRatio>r?s:r/this.aspectRatio,this.cropper.y2-=o*this.aspectRatio>i?o:i/this.aspectRatio)}},t.prototype.doAutoCrop=function(){this.autoCrop&&this.crop()},t.prototype.crop=function(){if(this.sourceImage&&this.sourceImage.nativeElement&&null!=this.transformedImage){this.startCropImage.emit();var t=this.getImagePosition(),e=t.x2-t.x1,i=t.y2-t.y1,r=document.createElement("canvas");r.width=e,r.height=i;var s=r.getContext("2d");if(s){null!=this.backgroundColor&&(s.fillStyle=this.backgroundColor,s.fillRect(0,0,e,i));var a=(this.transform.scale||1)*(this.transform.flipH?-1:1),p=(this.transform.scale||1)*(this.transform.flipV?-1:1);s.setTransform(a,0,0,p,this.transformedSize.width/2,this.transformedSize.height/2),s.translate(-t.x1/a,-t.y1/p),s.rotate((this.transform.rotate||0)*Math.PI/180),s.drawImage(this.transformedImage,-this.transformedSize.width/2,-this.transformedSize.height/2);var h={width:e,height:i,imagePosition:t,cropperPosition:o({},this.cropper)};this.containWithinAspectRatio&&(h.offsetImagePosition=this.getOffsetImagePosition());var n=this.getResizeRatio(e,i);return 1!==n&&(h.width=Math.round(e*n),h.height=this.maintainAspectRatio?Math.round(h.width/this.aspectRatio):Math.round(i*n),function(t,e,i){var r=t.width,o=t.height,s=r/(e=Math.round(e)),a=o/(i=Math.round(i)),p=Math.ceil(s/2),h=Math.ceil(a/2),n=t.getContext("2d");if(n){for(var c=n.getImageData(0,0,r,o),m=n.createImageData(e,i),g=c.data,l=m.data,d=0;d<i;d++)for(var u=0;u<e;u++){var f=4*(u+d*e),y=d*a,v=0,x=0,A=0,S=0,z=0,w=0,M=0,I=Math.floor(u*s),b=Math.floor(d*a),R=Math.ceil((u+1)*s),E=Math.ceil((d+1)*a);R=Math.min(R,r),E=Math.min(E,o);for(var C=b;C<E;C++)for(var B=Math.abs(y-C)/h,H=u*s,Q=B*B,T=I;T<R;T++){var k=Math.abs(H-T)/p,W=Math.sqrt(Q+k*k);if(!(W>=1)){var P=4*(T+C*r);M+=(v=2*W*W*W-3*W*W+1)*g[P+3],A+=v,g[P+3]<255&&(v=v*g[P+3]/250),S+=v*g[P],z+=v*g[P+1],w+=v*g[P+2],x+=v}}l[f]=S/x,l[f+1]=z/x,l[f+2]=w/x,l[f+3]=M/A}t.width=e,t.height=i,n.putImageData(m,0,0)}}(r,h.width,h.height)),h.base64=this.cropToBase64(r),this.imageCropped.emit(h),h}}return null},t.prototype.getImagePosition=function(){var t=this.sourceImage.nativeElement,e=this.transformedSize.width/t.offsetWidth,i={x1:Math.round(this.cropper.x1*e),y1:Math.round(this.cropper.y1*e),x2:Math.round(this.cropper.x2*e),y2:Math.round(this.cropper.y2*e)};return this.containWithinAspectRatio||(i.x1=Math.max(i.x1,0),i.y1=Math.max(i.y1,0),i.x2=Math.min(i.x2,this.transformedSize.width),i.y2=Math.min(i.y2,this.transformedSize.height)),i},t.prototype.getOffsetImagePosition=function(){var t,e,i=this.canvasRotation+this.exifTransform.rotate,r=this.sourceImage.nativeElement,o=this.transformedSize.width/r.offsetWidth;i%2?(t=(this.transformedSize.width-this.originalSize.height)/2,e=(this.transformedSize.height-this.originalSize.width)/2):(t=(this.transformedSize.width-this.originalSize.width)/2,e=(this.transformedSize.height-this.originalSize.height)/2);var s={x1:Math.round(this.cropper.x1*o)-t,y1:Math.round(this.cropper.y1*o)-e,x2:Math.round(this.cropper.x2*o)-t,y2:Math.round(this.cropper.y2*o)-e};return this.containWithinAspectRatio||(s.x1=Math.max(s.x1,0),s.y1=Math.max(s.y1,0),s.x2=Math.min(s.x2,this.transformedSize.width),s.y2=Math.min(s.y2,this.transformedSize.height)),s},t.prototype.cropToBase64=function(t){return t.toDataURL("image/"+this.format,this.getQuality())},t.prototype.getQuality=function(){return Math.min(1,Math.max(0,this.imageQuality/100))},t.prototype.getResizeRatio=function(t,e){var i=this.resizeToWidth/t,r=this.resizeToHeight/e,o=new Array;this.resizeToWidth>0&&o.push(i),this.resizeToHeight>0&&o.push(r);var a=0===o.length?1:Math.min.apply(Math,function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(s(arguments[e]));return t}(o));return a>1&&!this.onlyScaleDown?a:Math.min(a,1)},t.prototype.getClientX=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientX:t.clientX)||0},t.prototype.getClientY=function(t){return(t.touches&&t.touches[0]?t.touches[0].clientY:t.clientY)||0},t.decorators=[{type:e.Component,args:[{selector:"image-cropper",template:'<div [style.background]="imageVisible && backgroundColor"\n     #wrapper\n>\n    <img\n      #sourceImage\n      class="source-image"\n      *ngIf="safeImgDataUrl"\n      [src]="safeImgDataUrl"\n      [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n      [style.transform]="safeTransformStyle"\n      (load)="imageLoadedInView()"\n    />\n    <div\n        class="overlay"\n        [style.width.px]="maxSize.width"\n        [style.height.px]="maxSize.height"\n        [style.margin-left]="alignImage === \'center\' ? marginLeft : null"\n    ></div>\n    <div class="cropper"\n         *ngIf="imageVisible"\n         [class.rounded]="roundCropper"\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]="alignImage === \'center\' ? marginLeft : null"\n         [style.visibility]="imageVisible ? \'visible\' : \'hidden\'"\n         (keydown)="keyboardAccess($event)"\n         tabindex="0"\n    >\n        <div\n            (mousedown)="startMove($event, moveTypes.Move)"\n            (touchstart)="startMove($event, moveTypes.Move)"\n            class="move">\n        </div>\n        <ng-container *ngIf="!hideResizeSquares">\n            <span class="resize topleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize top">\n                <span class="square"></span>\n            </span>\n            <span class="resize topright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'topright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'topright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize right">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomright"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomright\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomright\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottom">\n                <span class="square"></span>\n            </span>\n            <span class="resize bottomleft"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottomleft\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottomleft\')">\n                <span class="square"></span>\n            </span>\n            <span class="resize left">\n                <span class="square"></span>\n            </span>\n            <span class="resize-bar top"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'top\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'top\')">\n            </span>\n            <span class="resize-bar right"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'right\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'right\')">\n            </span>\n            <span class="resize-bar bottom"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'bottom\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'bottom\')">\n            </span>\n            <span class="resize-bar left"\n                  (mousedown)="startMove($event, moveTypes.Resize, \'left\')"\n                  (touchstart)="startMove($event, moveTypes.Resize, \'left\')">\n            </span>\n        </ng-container>\n    </div>\n</div>\n',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:[':host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.source-image{max-width:100%;max-height:100%;transform-origin:center}:host .overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color,#fff) solid 100vw;top:0;left:0}:host .cropper{position:absolute;display:flex;color:#53535c;background:0 0;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color,rgba(255,255,255,.3)) solid 100vw;touch-action:none}:host .cropper:after{position:absolute;content:"";top:0;bottom:0;left:0;right:0;pointer-events:none;border:1px dashed;opacity:.75;color:inherit;z-index:1}:host .cropper .move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .cropper:focus .move{border-color:#1e90ff;border-width:2px}:host .cropper .resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .cropper .resize .square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:nesw-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .cropper .resize-bar{position:absolute;z-index:1}:host .cropper .resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{border-radius:100%;box-shadow:0 0 0 100vw rgba(255,255,255,.3);box-shadow:0 0 0 100vw var(--cropper-outline-color,rgba(255,255,255,.3))}@media (orientation:portrait){:host .cropper{outline-width:100vh}:host .cropper.rounded:after{box-shadow:0 0 0 100vh rgba(255,255,255,.3);box-shadow:0 0 0 100vh var(--cropper-outline-color,rgba(255,255,255,.3))}}:host .cropper.rounded .move{border-radius:100%}:host.disabled .cropper .move,:host.disabled .cropper .resize,:host.disabled .cropper .resize-bar{display:none}']}]}],t.ctorParameters=function(){return[{type:r.DomSanitizer},{type:e.ChangeDetectorRef}]},t.propDecorators={wrapper:[{type:e.ViewChild,args:["wrapper",{static:!0}]}],sourceImage:[{type:e.ViewChild,args:["sourceImage",{static:!1}]}],imageChangedEvent:[{type:e.Input}],imageURL:[{type:e.Input}],imageBase64:[{type:e.Input}],imageFile:[{type:e.Input}],format:[{type:e.Input}],maintainAspectRatio:[{type:e.Input}],transform:[{type:e.Input}],aspectRatio:[{type:e.Input}],resizeToWidth:[{type:e.Input}],resizeToHeight:[{type:e.Input}],cropperMinWidth:[{type:e.Input}],cropperMinHeight:[{type:e.Input}],cropperStaticWidth:[{type:e.Input}],cropperStaticHeight:[{type:e.Input}],canvasRotation:[{type:e.Input}],initialStepSize:[{type:e.Input}],roundCropper:[{type:e.Input}],onlyScaleDown:[{type:e.Input}],imageQuality:[{type:e.Input}],autoCrop:[{type:e.Input}],backgroundColor:[{type:e.Input}],containWithinAspectRatio:[{type:e.Input}],hideResizeSquares:[{type:e.Input}],cropper:[{type:e.Input}],alignImage:[{type:e.HostBinding,args:["style.text-align"]},{type:e.Input}],disabled:[{type:e.HostBinding,args:["class.disabled"]},{type:e.Input}],imageCropped:[{type:e.Output}],startCropImage:[{type:e.Output}],imageLoaded:[{type:e.Output}],cropperReady:[{type:e.Output}],loadImageFailed:[{type:e.Output}],onResize:[{type:e.HostListener,args:["window:resize"]}],moveImg:[{type:e.HostListener,args:["document:mousemove",["$event"]]},{type:e.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:e.HostListener,args:["document:mouseup"]},{type:e.HostListener,args:["document:touchend"]}]},t}();var c=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],declarations:[n],exports:[n]}]}],t}();t.ImageCropperComponent=n,t.ImageCropperModule=c,t.base64ToFile=function(t){for(var e=t.split(","),i=e[0].replace("data:","").replace(";base64",""),r=atob(e[1]),o=new ArrayBuffer(r.length),s=new Uint8Array(o),a=0;a<r.length;a+=1)s[a]=r.charCodeAt(a);return new Blob([o],{type:i})},Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-image-cropper.umd.min.js.map

lib/component/image-cropper.component.d.ts

@@ -111,5 +111,5 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
     private getQuality;
-    private getResizeRatio;
+    getResizeRatio(width: number, height: number): number;
     private getClientX;
     private getClientY;
 }

package.json

 {
   "name": "ngx-image-cropper",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "An image cropper for Angular",
@@ -5,0 +5,0 @@ "author": "Martijn Willekens",

README.md

@@ -97,4 +97,4 @@ # Image cropper for Angular
 | `containWithinAspectRatio` | boolean   | false        | When set to true, padding will be added around the image to make it fit to the aspect ratio |
-| `resizeToWidth`            | number    | 0 (disabled) | Cropped image will be resized to this width (in px) |
-| `resizeToHeight`           | number    | 0 (disabled) | Cropped image will be resized to this height (in px) (will be ignored if resizeToWidth is set)  |
+| `resizeToWidth`            | number    | 0 (disabled) | Cropped image will be resized to at most this width (in px) |
+| `resizeToHeight`           | number    | 0 (disabled) | Cropped image will be resized to at most this height (in px)  |
 | `cropperStaticWidth`          | number    | 0 (disabled) | Set Cropper Width and disable resize (in px) |
@@ -105,3 +105,3 @@ | `cropperStaticHeight`          | number    | 0 (disabled) | Set Cropper Height and disable resize (in px) |
 | `initialStepSize`          | number    | 3 (px)       | The initial step size in pixels when moving the cropper using the keyboard. Step size can then be changed by using the numpad when the cropper is focused |
-| `onlyScaleDown`            | boolean   | false        | When the `resizeToWidth` is set, enabling this option will make sure smaller images are not scaled up |
+| `onlyScaleDown`            | boolean   | false        | When the `resizeToWidth` or `resizeToHeight` is set, enabling this option will make sure smaller images are not scaled up |
 | `cropper`                  | CropperPosition |  | To be able to overwrite the cropper coordinates, you can use this input. Create a new object of type `CropperPosition` and assign it to this input. Make sure to create a new object each time you wish to overwrite the cropper's position and wait for the `cropperReady` event to have fired. |
@@ -108,0 +108,0 @@ | `roundCropper`             | boolean   | false        | Set this to true for a round cropper. Resulting image will still be square, use `border-radius: 100%` on resulting image to show it as round. |

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

1086274

increased by0.39%

Lines of code

9855

increased by0.28%

No dependency changes