insight-ngx-image-editor/bundles/insight-ngx-image-editor.umd.min.js

Angular 5 Image Editor

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/flex-layout"),require("@angular/material"),require("@angular/forms"),require("@angular/common"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("insight-ngx-image-editor",["exports","@angular/core","@angular/flex-layout","@angular/material","@angular/forms","@angular/common","@angular/platform-browser/animations"],e):e(t["insight-ngx-image-editor"]={},t.ng.core,t.ng["flex-layout"],t.ng.material,t.ng.forms,t.ng.common,t.ng.platformBrowser.animations)}(this,function(t,e,o,n,a,i,r){"use strict";var p=function(){function t(){this.file=new e.EventEmitter,this.zoomIn=0,this.sliderValue=0,this.loading=!0,this.canvasFillColor="#fff",this.state=new s}return Object.defineProperty(t.prototype,"config",{set:function(t){this.state=t},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.handleStateConfig()},t.prototype.ngOnDestroy=function(){this.cropper.destroy()},t.prototype.ngAfterViewInit=function(){!this.state.File&&this.state.ImageUrl&&this.initializeCropper()},t.prototype.handleStateConfig=function(){this.state.ImageType=this.state.ImageType?this.state.ImageType:"image/jpeg",this.state.ImageUrl&&(this.state.File=null,this.previewImageURL=this.state.ImageUrl),this.state.File&&(this.state.ImageUrl=null,this.convertFileToBase64(this.state.File)),this.state.AspectRatios?this.addRatios(this.state.AspectRatios):this.ratios=g,this.state.ImageUrl||this.state.File||console.error("Property ImageUrl or File is missing, Please provide an url or file in the config options."),this.state.ImageName||console.error("Property ImageName is missing, Please provide a name for the image.")},t.prototype.convertFileToBase64=function(t){var e=this,o=new FileReader;o.addEventListener("load",function(t){e.previewImageURL=t.target.result},!1),o.readAsDataURL(t),o.onloadend=function(){e.initializeCropper()}},t.prototype.addRatios=function(t){var o=this;this.ratios=[],t.forEach(function(e){var t=g.find(function(t){return t.text===e});o.ratios.push(t)})},t.prototype.handleCrop=function(){var e=this;this.loading=!0,setTimeout(function(){e.croppedImage=e.cropper.getCroppedCanvas({fillColor:e.canvasFillColor}).toDataURL(e.state.ImageType),setTimeout(function(){e.imageWidth=e.croppedImg.nativeElement.width,e.imageHeight=e.croppedImg.nativeElement.height}),e.cropper.getCroppedCanvas({fillColor:e.canvasFillColor}).toBlob(function(t){e.blob=t}),e.zoomIn=1,e.loading=!1},2e3)},t.prototype.undoCrop=function(){var t=this;this.croppedImage=null,this.blob=null,setTimeout(function(){t.initializeCropper()},100)},t.prototype.saveImage=function(){this.file.emit(new File([this.blob],this.state.ImageName,{type:this.state.ImageType}))},t.prototype.initializeCropper=function(){var e=this;this.cropper=new Cropper(this.previewImage.nativeElement,{zoomOnWheel:!0,viewMode:0,center:!0,ready:function(){return e.loading=!1},dragMode:"move",crop:function(t){e.imageHeight=Math.round(t.detail.height),e.imageWidth=Math.round(t.detail.width),e.cropBoxWidth=Math.round(e.cropper.getCropBoxData().width),e.cropBoxHeight=Math.round(e.cropper.getCropBoxData().height),e.canvasWidth=Math.round(e.cropper.getCanvasData().width),e.canvasHeight=Math.round(e.cropper.getCanvasData().height)}}),this.setRatio(this.ratios[0].value)},t.prototype.setRatio=function(t){this.cropper.setAspectRatio(t)},t.prototype.zoomChange=function(t,e){this.croppedImage?(e?"zoomIn"===e?this.zoomIn+=.1:this.zoomIn-=.1:t<this.sliderValue?this.zoomIn=-Math.abs(t/1e3):this.zoomIn=Math.abs(t/1e3),this.zoomIn<=.1&&(this.zoomIn=.1)):e?(this.cropper.zoom(t),this.zoomIn=t):(t<this.sliderValue?this.cropper.zoom(-Math.abs(t/1e3)):this.cropper.zoom(Math.abs(t/1e3)),0===t&&this.cropper.zoom(-1)),e?0<t?this.sliderValue+=Math.abs(1e3*t):this.sliderValue-=Math.abs(1e3*t):this.sliderValue=t,this.sliderValue<0&&(this.sliderValue=0)},t.prototype.setImageWidth=function(t){t&&this.cropper.setCanvasData({left:this.cropper.getCanvasData().left,top:this.cropper.getCanvasData().top,width:Math.round(t),height:this.cropper.getCanvasData().height})},t.prototype.setImageHeight=function(t){t&&this.cropper.setCanvasData({left:this.cropper.getCanvasData().left,top:this.cropper.getCanvasData().top,width:this.cropper.getCanvasData().width,height:Math.round(t)})},t.prototype.setCropBoxWidth=function(t){t&&this.cropper.setCropBoxData({left:this.cropper.getCropBoxData().left,top:this.cropper.getCropBoxData().top,width:Math.round(t),height:this.cropper.getCropBoxData().height})},t.prototype.setCropBoxHeight=function(t){t&&this.cropper.setCropBoxData({left:this.cropper.getCropBoxData().left,top:this.cropper.getCropBoxData().top,width:this.cropper.getCropBoxData().width,height:Math.round(t)})},t.prototype.centerCanvas=function(){var t=(this.cropper.getContainerData().width-this.cropper.getCropBoxData().width)/2,e=(this.cropper.getContainerData().height-this.cropper.getCropBoxData().height)/2,o=(this.cropper.getContainerData().width-this.cropper.getCanvasData().width)/2,n=(this.cropper.getContainerData().height-this.cropper.getCanvasData().height)/2;this.cropper.setCropBoxData({left:t,top:e,width:this.cropper.getCropBoxData().width,height:this.cropper.getCropBoxData().height}),this.cropper.setCanvasData({left:o,top:n,width:this.cropper.getCanvasData().width,height:this.cropper.getCanvasData().height})},t}();p.decorators=[{type:e.Component,args:[{selector:"ngx-image-editor",template:'\n      <div class="ngx-image-editor-component1" fxLayout="column" fxLayoutAlign="center stretch">\n          <div mat-dialog-title class="photo-editor-header">\n                         <button [hidden]="croppedImage" mat-icon-button color="accent" matTooltip="Crop image"\n                      (click)="handleCrop()">\n                  <mat-icon>crop</mat-icon>\n              </button>\n             </div>\n\n          <div mat-dialog-content\n               #dialogCropContainer\n               class="dialog-crop-container"\n               fxLayout="column"\n               fxLayoutAlign="center center"\n               fxFlex="grow">\n              <ng-template [ngIf]="!croppedImage">\n                  <div\n                          [style.visibility]="loading ? \'hidden\' : \'visible\'"\n                          [style.background]="canvasFillColor"\n                          class="img-container">\n                      <img #previewimg\n                           [src]="previewImageURL">\n                  </div>\n              </ng-template>\n              <ng-template [ngIf]="croppedImage && !loading">\n                  <div class="cropped-image">\n                      <img #croppedImg\n                           [ngStyle]="{\'transform\': \'scale(\' + zoomIn + \')\'}"\n                           [src]="croppedImage">\n                  </div>\n              </ng-template>\n              <mat-progress-spinner *ngIf="loading" mode="indeterminate"></mat-progress-spinner>\n          </div>\n\n          <div\n                  class="dialog-button-actions"\n                  mat-dialog-actions\n                  fxLayout="column"\n                  align="start"\n                  fxFlex="nogrow">\n\n              <div class="image-detail-toolbar" fxFlex="100">\n                  <div class="image-dimensions"><b>Width:</b> <span>{{imageWidth}}px</span> <b>Height:</b> <span>{{imageHeight}}px</span></div>\n                  <span fxFlex></span>\n                  <div class="image-zoom">\n                      <button mat-icon-button color="accent" >\n                         <span>{{sliderValue}}%</span>\n                      </button>\n                      <mat-slider vertical [value]="sliderValue" (input)="zoomChange($event.value)" thumbLabel></mat-slider>\n                      <button mat-icon-button color="accent" >\n                         zoom\n                      </button>\n                  </div>\n              </div>\n                          <div fxLayout="row" [style.visibility]="croppedImage ? \'hidden\' : \'visible\'">\n                  <mat-button-toggle-group\n                          #dragMode="matButtonToggleGroup"\n                          (change)="cropper.setDragMode($event.value)"\n                          value="move">\n                      <mat-button-toggle value="move" matTooltip="Move mode">\n                          <mat-icon>open_with</mat-icon>\n                      </mat-button-toggle>\n                      <mat-button-toggle value="crop" matTooltip="Crop mode">\n                          <mat-icon>crop</mat-icon>\n                      </mat-button-toggle>\n                  </mat-button-toggle-group>\n\n                  <mat-button-toggle-group\n                          #selectRatio="matButtonToggleGroup"\n                          (change)="setRatio($event.value)"\n                          value="{{ratios[0].value}}">\n                      <mat-button-toggle *ngFor="let ratio of ratios" value="{{ratio.value}}" matTooltip="Aspect ratio">\n                          {{ratio.text}}\n                      </mat-button-toggle>\n                  </mat-button-toggle-group>\n\n              </div>\n     </div>\n\n  <div class="cropped-image-buttons" [style.visibility]="!croppedImage ? \'hidden\' : \'visible\'">\n                                  <button mat-raised-button id="cropimage" color="accent" (click)="undoCrop()">\n                                         <span>Undo</span>\n                  </button>\n    <button mat-raised-button id="saveimage" color="accent" (click)="saveImage()">\n                                        <span>Apply</span>\n                  </button>\n            </div>\n     </div>\n\n  ',styles:["\n\n      .ngx-image-editor-component .photo-editor-header {\n          display: flex;\n          justify-content: space-around;\n          width: 7%;\n          padding: 0;\n          z-index: 100;\n          margin: 0;\n   top: 0;\n  position: relative;\n   }\n\n      .ngx-image-editor-component .photo-editor-header > .mat-icon {\n          padding: 0 10px;\n      }\n\n      .ngx-image-editor-component .photo-editor-header > .file-name {\n          flex: 1 1 100%;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n          overflow: hidden;\n      }\n\n      .ngx-image-editor-component mat-progress-spinner {\n          position: absolute;\n      }\n\n      .ngx-image-editor-component .dialog-crop-container {\n          width: 800px;\n          height: 400px;\n          overflow: hidden;\n      }\n\n      .ngx-image-editor-component .cropper-bg {\n          background-image: none !important;\n      }\n\n      .ngx-image-editor-component .cropper-bg > .cropper-modal {\n          opacity: 1 !important;\n          background: none;\n      }\n\n      .ngx-image-editor-component .img-container {\n          width: 800px !important;\n          height: 400px !important;\n      }\n\n      .ngx-image-editor-component .cropped-image img {\n          width: auto !important;\n          height: auto !important;\n          max-width: 800px !important;\n          max-height: 400px !important;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions {\n          position: relative;\n          padding: 0;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions:last-child {\n          margin: 0;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions > DIV mat-button-toggle-group {\n          margin: 20px;\n      }\n\n      .ngx-image-editor-component .dialog-button-actions .cropped-image-buttons {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n      }\n\n      .ngx-image-editor-component .dialog-button-actions > .canvas-config {\n          padding: 5px;\n          margin: 0 20px;\n      }\n\n      \n\n      .ngx-image-editor-component .dialog-button-actions > .canvas-config md2-colorpicker {\n          width: 200px !important;\n      }\n      \n\n      .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom {\n          display: flex;\n          align-items: center;\n          padding: 0 10px;\n      }\n      \n      .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-zoom .mat-slider-vertical .mat-slider-wrapper .mat-slider-thumb-container {\n          cursor: grab;\n      }\n      \n\n      .ngx-image-editor-component .dialog-button-actions .image-detail-toolbar > .image-dimensions {\n          padding: 0 10px;\n          font-size: 14px;\n          width: 200px;\n          max-width: 200px;\n      }\n\n   \n\n\n\n\n\n\n\n\n\n\n  "],encapsulation:e.ViewEncapsulation.None}]}],p.ctorParameters=function(){return[]},p.propDecorators={previewImage:[{type:e.ViewChild,args:["previewimg"]}],croppedImg:[{type:e.ViewChild,args:["croppedImg"]}],config:[{type:e.Input}],file:[{type:e.Output}]};var s=function d(){},g=[{value:16/9,text:"16:9"},{value:4/3,text:"4:3"},{value:1,text:"1:1"},{value:2/3,text:"2:3"},{value:NaN,text:"Default"}],l=function(){function t(){}return t.forRoot=function(){return{ngModule:t}},t}();l.decorators=[{type:e.NgModule,args:[{imports:[a.FormsModule,r.BrowserAnimationsModule,i.CommonModule,a.ReactiveFormsModule,o.FlexLayoutModule,n.MatButtonModule,n.MatIconModule,n.MatDialogModule,n.MatInputModule,n.MatMenuModule,n.MatProgressSpinnerModule,n.MatTabsModule,n.MatTooltipModule,n.MatButtonToggleModule,n.MatSliderModule,n.MatAutocompleteModule],declarations:[p],exports:[p]}]}],t.NgxImageEditorModule=l,t.NgxImageEditorComponent=p,t.EditorOptions=s,t.NGX_DEFAULT_RATIOS=g,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=insight-ngx-image-editor.umd.min.js.map