Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ngx-image-cropper

Package Overview
Dependencies
Maintainers
1
Versions
111
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-image-cropper - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

2

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/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-image-cropper",["exports","@angular/core","@angular/platform-browser","@angular/common"],e):e(t["ngx-image-cropper"]={},t.ng.core,t.ng.platformBrowser,t.ng.common)}(this,function(t,r,e,i){"use strict";var o=function(){function n(){}return n.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 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},n.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},n.resetOrientation=function(o,s,a){var p=new Image;p.onload=function(){var t=p.width,e=p.height,i=document.createElement("canvas"),r=i.getContext("2d");r?(4<s&&s<9?(i.width=e,i.height=t):(i.width=t,i.height=e),n.transformCanvas(r,s,t,e),r.drawImage(p,0,0),a(i.toDataURL())):a(o)},p.src=o},n.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)}},n}(),s=function(){function t(t,e,i){this.elementRef=t,this.sanitizer=e,this.cd=i,this.marginLeft="0px",this.imageVisible=!1,this.format="png",this.maintainAspectRatio=!0,this.aspectRatio=1,this.resizeToWidth=0,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.imageCropped=new r.EventEmitter,this.imageCroppedBase64=new r.EventEmitter,this.imageCroppedFile=new r.EventEmitter,this.imageLoaded=new r.EventEmitter,this.loadImageFailed=new r.EventEmitter,this.initCropper()}return Object.defineProperty(t.prototype,"imageFileChanged",{set:function(t){this.initCropper(),t&&this.loadImageFile(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"imageChangedEvent",{set:function(t){this.initCropper(),t&&t.target&&t.target.files&&0<t.target.files.length&&this.loadImageFile(t.target.files[0])},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.aspectRatio&&this.resetCropperPosition()},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.loadImageFile=function(i){var r=this,t=new FileReader;t.onload=function(t){var e=i.type;r.isValidImageType(e)?r.checkExifRotationAndLoadImage(t.target.result):r.loadImageFailed.emit()},t.readAsDataURL(i)},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);1<i?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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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 e=this,t=this.elementRef.nativeElement.querySelector(".source-image");if(t&&null!=this.originalImage){var i=this.originalSize.width/t.offsetWidth,r=Math.round(this.cropper.x1*i),o=Math.round(this.cropper.y1*i),s=Math.round((this.cropper.x2-this.cropper.x1)*i),a=Math.round((this.cropper.y2-this.cropper.y1)*i),p=this.getResizeRatio(s),n=Math.floor(s*p),h=Math.floor(a*p),c=document.createElement("canvas");c.width=n,c.height=h;var m=c.getContext("2d");if(m){m.drawImage(this.originalImage,r,o,s,a,0,0,s*p,a*p);var l=Math.min(1,Math.max(0,this.imageQuality/100)),g=c.toDataURL("image/"+this.format,l);10<g.length&&this.imageCroppedBase64.emit(g);c.toBlob(function(t){null!=t&&(e.imageCroppedFile.emit(t),e.imageCropped.emit({base64:g,file:t,width:n,height:h,cropperPosition:Object.assign({},e.cropper)}))},"image/"+this.format,l)}}},t.prototype.getResizeRatio=function(t){return 0<this.resizeToWidth&&(!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.decorators=[{type:r.Component,args:[{selector:"image-cropper",template:'<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 [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]="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',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>div{position:relative;width:100%}:host>div .source-image{max-width:100%;max-height:100%}:host .cropper{position:absolute;display:flex;color:#53535c!important;background:0 0!important;touch-action:none;outline:rgba(255,255,255,.3) solid 1000px}: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 .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!important;width:6px;height:6px;border:1px solid rgba(255,255,255,.5)}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nw-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:n-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:ne-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:e-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:se-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:s-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:sw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:w-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:n-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:e-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:s-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:w-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{box-shadow:0 0 0 100vw rgba(255,255,255,.3);border-radius:100%}:host .cropper.rounded .move{border-radius:100%}"]}]}],t.ctorParameters=function(){return[{type:r.ElementRef},{type:e.DomSanitizer},{type:r.ChangeDetectorRef}]},t.propDecorators={imageFileChanged:[{type:r.Input}],imageChangedEvent:[{type:r.Input}],imageBase64:[{type:r.Input}],format:[{type:r.Input}],maintainAspectRatio:[{type:r.Input}],aspectRatio:[{type:r.Input}],resizeToWidth:[{type:r.Input}],roundCropper:[{type:r.Input}],onlyScaleDown:[{type:r.Input}],imageQuality:[{type:r.Input}],cropper:[{type:r.Input}],imageCropped:[{type:r.Output}],imageCroppedBase64:[{type:r.Output}],imageCroppedFile:[{type:r.Output}],imageLoaded:[{type:r.Output}],loadImageFailed:[{type:r.Output}],onResize:[{type:r.HostListener,args:["window:resize",["$event"]]}],moveImg:[{type:r.HostListener,args:["document:mousemove",["$event"]]},{type:r.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:r.HostListener,args:["document:mouseup",["$event"]]},{type:r.HostListener,args:["document:touchend",["$event"]]}]},t}(),a=function(){function t(){}return t.decorators=[{type:r.NgModule,args:[{imports:[i.CommonModule],declarations:[s],exports:[s]}]}],t}();t.ImageCropperModule=a,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/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-image-cropper",["exports","@angular/core","@angular/platform-browser","@angular/common"],e):e(t["ngx-image-cropper"]={},t.ng.core,t.ng.platformBrowser,t.ng.common)}(this,function(t,r,e,i){"use strict";var o=function(){function n(){}return n.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 p=e.getUint16(r,s);r+=2;for(var a=0;a<p;a++)if(274==e.getUint16(r+12*a,s))return e.getUint16(r+12*a+8,s)}else{if(65280!=(65280&o))break;r+=e.getUint16(r,!1)}}return-1},n.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},n.resetOrientation=function(o,s,p){var a=new Image;a.onload=function(){var t=a.width,e=a.height,i=document.createElement("canvas"),r=i.getContext("2d");r?(4<s&&s<9?(i.width=e,i.height=t):(i.width=t,i.height=e),n.transformCanvas(r,s,t,e),r.drawImage(a,0,0),p(i.toDataURL())):p(o)},a.src=o},n.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)}},n}(),s=function(){function t(t,e,i){this.elementRef=t,this.sanitizer=e,this.cd=i,this.marginLeft="0px",this.imageVisible=!1,this.format="png",this.outputType="both",this.maintainAspectRatio=!0,this.aspectRatio=1,this.resizeToWidth=0,this.roundCropper=!1,this.onlyScaleDown=!1,this.imageQuality=92,this.autoCrop=!0,this.cropper={x1:-100,y1:-100,x2:1e4,y2:1e4},this.imageCropped=new r.EventEmitter,this.imageCroppedBase64=new r.EventEmitter,this.imageCroppedFile=new r.EventEmitter,this.imageLoaded=new r.EventEmitter,this.loadImageFailed=new r.EventEmitter,this.initCropper()}return Object.defineProperty(t.prototype,"imageFileChanged",{set:function(t){this.initCropper(),t&&this.loadImageFile(t)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"imageChangedEvent",{set:function(t){this.initCropper(),t&&t.target&&t.target.files&&0<t.target.files.length&&this.loadImageFile(t.target.files[0])},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.doAutoCrop(),e.cd.markForCheck()}),t.aspectRatio&&this.resetCropperPosition()},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.loadImageFile=function(i){var r=this,t=new FileReader;t.onload=function(t){var e=i.type;r.isValidImageType(e)?r.checkExifRotationAndLoadImage(t.target.result):r.loadImageFailed.emit()},t.readAsDataURL(i)},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);1<i?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.doAutoCrop(),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.doAutoCrop(),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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(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),(0<t||0<e)&&(this.cropper.x1+=e*this.aspectRatio>t?e*this.aspectRatio:t,this.cropper.y2-=e*this.aspectRatio>t?e:t/this.aspectRatio)}},t.prototype.doAutoCrop=function(){this.autoCrop&&this.crop()},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),p=this.getResizeRatio(o),a=Math.floor(o*p),n=Math.floor(s*p),h=document.createElement("canvas");h.width=a,h.height=n;var c=h.getContext("2d");c&&(c.drawImage(this.originalImage,i,r,o,s,0,0,o*p,s*p),this.cropToOutputType(h,a,n))}},t.prototype.cropToOutputType=function(t,e,i){var r=this,o={width:e,height:i,cropperPosition:Object.assign({},this.cropper)};switch(this.outputType){case"base64":o.base64=this.cropToBase64(t),this.imageCropped.emit(o);break;case"file":this.cropToFile(t).then(function(t){o.file=t,r.imageCropped.emit(o)});break;case"both":o.base64=this.cropToBase64(t),this.cropToFile(t).then(function(t){o.file=t,r.imageCropped.emit(o)})}},t.prototype.cropToBase64=function(t){var e=t.toDataURL("image/"+this.format,this.getQuality());return this.imageCroppedBase64.emit(e),e},t.prototype.cropToFile=function(t){var e=this;return this.getCanvasBlob(t).then(function(t){return t&&e.imageCroppedFile.emit(t),t})},t.prototype.getCanvasBlob=function(t){var i=this;return new Promise(function(e){t.toBlob(function(t){return e(t)},"image/"+i.format,i.getQuality())})},t.prototype.getQuality=function(){return Math.min(1,Math.max(0,this.imageQuality/100))},t.prototype.getResizeRatio=function(t){return 0<this.resizeToWidth&&(!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.decorators=[{type:r.Component,args:[{selector:"image-cropper",template:'<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 [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]="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',changeDetection:r.ChangeDetectionStrategy.OnPush,styles:[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>div{position:relative;width:100%}:host>div .source-image{max-width:100%;max-height:100%}:host .cropper{position:absolute;display:flex;color:#53535c!important;background:0 0!important;touch-action:none;outline:rgba(255,255,255,.3) solid 1000px}: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 .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!important;width:6px;height:6px;border:1px solid rgba(255,255,255,.5)}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nw-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:n-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:ne-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:e-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:se-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:s-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:sw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:w-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:n-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:e-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:s-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:w-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{box-shadow:0 0 0 100vw rgba(255,255,255,.3);border-radius:100%}:host .cropper.rounded .move{border-radius:100%}"]}]}],t.ctorParameters=function(){return[{type:r.ElementRef},{type:e.DomSanitizer},{type:r.ChangeDetectorRef}]},t.propDecorators={imageFileChanged:[{type:r.Input}],imageChangedEvent:[{type:r.Input}],imageBase64:[{type:r.Input}],format:[{type:r.Input}],outputType:[{type:r.Input}],maintainAspectRatio:[{type:r.Input}],aspectRatio:[{type:r.Input}],resizeToWidth:[{type:r.Input}],roundCropper:[{type:r.Input}],onlyScaleDown:[{type:r.Input}],imageQuality:[{type:r.Input}],autoCrop:[{type:r.Input}],cropper:[{type:r.Input}],imageCropped:[{type:r.Output}],imageCroppedBase64:[{type:r.Output}],imageCroppedFile:[{type:r.Output}],imageLoaded:[{type:r.Output}],loadImageFailed:[{type:r.Output}],onResize:[{type:r.HostListener,args:["window:resize",["$event"]]}],moveImg:[{type:r.HostListener,args:["document:mousemove",["$event"]]},{type:r.HostListener,args:["document:touchmove",["$event"]]}],moveStop:[{type:r.HostListener,args:["document:mouseup",["$event"]]},{type:r.HostListener,args:["document:touchend",["$event"]]}]},t}(),p=function(){function t(){}return t.decorators=[{type:r.NgModule,args:[{imports:[i.CommonModule],declarations:[s],exports:[s]}]}],t}();t.ImageCropperModule=p,t.ImageCropperComponent=s,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-image-cropper.umd.min.js.map

2

ngx-image-cropper.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":4,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":8}],"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","line":39,"character":1},"arguments":[{"selector":"image-cropper","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":43,"character":21},"member":"OnPush"},"template":"<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 [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]=\"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":[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>div{position:relative;width:100%}:host>div .source-image{max-width:100%;max-height:100%}:host .cropper{position:absolute;display:flex;color:#53535c!important;background:0 0!important;touch-action:none;outline:rgba(255,255,255,.3) solid 1000px}: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 .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!important;width:6px;height:6px;border:1px solid rgba(255,255,255,.5)}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nw-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:n-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:ne-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:e-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:se-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:s-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:sw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:w-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:n-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:e-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:s-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:w-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{box-shadow:0 0 0 100vw rgba(255,255,255,.3);border-radius:100%}:host .cropper.rounded .move{border-radius:100%}"]}]}],"members":{"imageFileChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"roundCropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":5}}]}],"imageCroppedBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"imageCroppedFile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":98,"character":36},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":98,"character":67},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":98,"character":93}]}],"ngOnChanges":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImageFile":[{"__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","line":202,"character":5},"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","line":247,"character":5},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":248,"character":5},"arguments":["document:touchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":291,"character":5},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":292,"character":5},"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":4,"metadata":{"ImageCropperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":8}],"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","line":39,"character":1},"arguments":[{"selector":"image-cropper","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":43,"character":21},"member":"OnPush"},"template":"<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 [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]=\"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":[":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>div{position:relative;width:100%}:host>div .source-image{max-width:100%;max-height:100%}:host .cropper{position:absolute;display:flex;color:#53535c!important;background:0 0!important;touch-action:none;outline:rgba(255,255,255,.3) solid 1000px}: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 .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!important;width:6px;height:6px;border:1px solid rgba(255,255,255,.5)}:host .cropper .resize.topleft{top:-12px;left:-12px;cursor:nw-resize}:host .cropper .resize.top{top:-12px;left:calc(50% - 12px);cursor:n-resize}:host .cropper .resize.topright{top:-12px;right:-12px;cursor:ne-resize}:host .cropper .resize.right{top:calc(50% - 12px);right:-12px;cursor:e-resize}:host .cropper .resize.bottomright{bottom:-12px;right:-12px;cursor:se-resize}:host .cropper .resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:s-resize}:host .cropper .resize.bottomleft{bottom:-12px;left:-12px;cursor:sw-resize}:host .cropper .resize.left{top:calc(50% - 12px);left:-12px;cursor:w-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:n-resize}:host .cropper .resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:e-resize}:host .cropper .resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:s-resize}:host .cropper .resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:w-resize}:host .cropper.rounded{outline-color:transparent}:host .cropper.rounded:after{box-shadow:0 0 0 100vw rgba(255,255,255,.3);border-radius:100%}:host .cropper.rounded .move{border-radius:100%}"]}]}],"members":{"imageFileChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"imageChangedEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"imageBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"outputType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"maintainAspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"resizeToWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"roundCropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"onlyScaleDown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"imageQuality":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"autoCrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":5}}]}],"imageCropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"imageCroppedBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":5}}]}],"imageCroppedFile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":5}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":5}}]}],"loadImageFailed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":36},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":100,"character":67},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":100,"character":93}]}],"ngOnChanges":[{"__symbolic":"method"}],"initCropper":[{"__symbolic":"method"}],"loadImageFile":[{"__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","line":204,"character":5},"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","line":249,"character":5},"arguments":["document:mousemove",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":250,"character":5},"arguments":["document:touchmove",["$event"]]}]}],"setMaxSize":[{"__symbolic":"method"}],"checkCropperPosition":[{"__symbolic":"method"}],"moveStop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":293,"character":5},"arguments":["document:mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":294,"character":5},"arguments":["document:touchend",["$event"]]}]}],"move":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"checkAspectRatio":[{"__symbolic":"method"}],"doAutoCrop":[{"__symbolic":"method"}],"crop":[{"__symbolic":"method"}],"cropToOutputType":[{"__symbolic":"method"}],"cropToBase64":[{"__symbolic":"method"}],"cropToFile":[{"__symbolic":"method"}],"getCanvasBlob":[{"__symbolic":"method"}],"getQuality":[{"__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"}

2

package.json
{
"name": "ngx-image-cropper",
"version": "1.1.0",
"version": "1.2.0",
"description": "An image cropper for Angular",

@@ -5,0 +5,0 @@ "main": "bundles/ngx-image-cropper.umd.js",

6

README.md

@@ -83,2 +83,3 @@ # Image cropper for Angular

| `format` | string | png | Output format (png, jpeg, webp, bmp, ico) (not all browsers support all types, png is always supported, others are optional) |
| `outputType` | string | both | Output type ('base64', 'file' or 'both'). Converting the image to a Blob can be quite a heavy operation. With this option, you could choose to only get the base64 which will improve the speed of cropping significantly |
| `maintainAspectRatio` | boolean | true | Keep width and height of cropped image equal according to the aspectRatio |

@@ -89,3 +90,4 @@ | `aspectRatio` | number | 1 / 1 | The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...) |

| `cropper` | { x1: number, y1: number, x2: number, y2: number } | | To be able to get the cropper coordinates, you can use this input. Create a new object `{x1: number, y1: number, x2: number, y2: number }` and assign it to this input. Make sure to create a new object each time you wish to overwrite the cropper's position. |
| `imageQuality` | number | 92 | This only applies when using jpeg or webp as output format. Entering a number between 0 and 100 will determine the quality of the output image. |
| `imageQuality` | number | 92 | This only applies when using jpeg or webp as output format. Entering a number between 0 and 100 will determine the quality of the output image. |
| `autoCrop` | boolean | true | When set to true, the cropper will emit an image each time the position or size of the cropper is changed. When set to true, you can call the crop method yourself (use @ViewChild to get access to the croppers methods). |

@@ -117,2 +119,2 @@ ### Outputs

| height | number | Height of the cropped image |
| croppedPosition | CropperPosition | Position of the cropper when it was cropped |
| cropperPosition | CropperPosition | Position of the cropper when it was cropped |

14

src/image-cropper.component.d.ts

@@ -10,4 +10,4 @@ import { ElementRef, EventEmitter, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

export interface ImageCroppedEvent {
base64: string;
file: Blob;
base64?: string | null;
file?: Blob | null;
width: number;

@@ -32,2 +32,3 @@ height: number;

format: 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';
outputType: 'base64' | 'file' | 'both';
maintainAspectRatio: boolean;

@@ -39,2 +40,3 @@ aspectRatio: number;

imageQuality: number;
autoCrop: boolean;
cropper: CropperPosition;

@@ -65,3 +67,9 @@ imageCropped: EventEmitter<ImageCroppedEvent>;

private checkAspectRatio();
private crop();
private doAutoCrop();
crop(): void;
private cropToOutputType(cropCanvas, resizedWidth, resizedHeight);
private cropToBase64(cropCanvas);
private cropToFile(cropCanvas);
private getCanvasBlob(cropCanvas);
private getQuality();
private getResizeRatio(width);

@@ -68,0 +76,0 @@ private getClientX(event);

bundles/ngx-image-cropper.umd.js

Sorry, the diff of this file is too big to display

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

Sorry, the diff of this file is not supported yet

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

Sorry, the diff of this file is not supported yet

esm2015/src/image-cropper.component.js

Sorry, the diff of this file is too big to display

esm5/src/image-cropper.component.js

Sorry, the diff of this file is too big to display

fesm2015/ngx-image-cropper.js

Sorry, the diff of this file is too big to display

fesm2015/ngx-image-cropper.js.map

Sorry, the diff of this file is not supported yet

fesm5/ngx-image-cropper.js

Sorry, the diff of this file is too big to display

fesm5/ngx-image-cropper.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc