ng-photo-editor
Version:
An image cropper for Angular
2 lines • 12.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("cropperjs"),require("@ng-bootstrap/ng-bootstrap")):"function"==typeof define&&define.amd?define("ng-photo-editor",["exports","@angular/core","cropperjs","@ng-bootstrap/ng-bootstrap"],t):t((e=e||self)["ng-photo-editor"]={},e.ng.core,e.Cropper,e.ngBootstrap)}(this,(function(e,t,o,i){"use strict";o=o&&o.hasOwnProperty("default")?o.default:o;var r=function(){function e(e){this.modalService=e,this.prevZoom=0,this.modalTitle="Photo Editor",this.aspectRatio=NaN,this.autoCropArea=1,this.autoCrop=!0,this.mask=!0,this.guides=!0,this.centerIndicator=!0,this.viewMode=0,this.modalCentered=!1,this.scalable=!0,this.zoomable=!0,this.cropBoxMovable=!0,this.cropBoxResizable=!0,this.darkTheme=!0,this.roundCropper=!1,this.canvasHeight=400,this.imageSmoothingEnabled=!0,this.imageSmoothingQuality="high",this.lastUpdate=Date.now(),this.format="png",this.quality=92,this.isFormatDefined=!1,this.imageCropped=new t.EventEmitter}return Object.defineProperty(e.prototype,"imageQuality",{set:function(e){e>0&&e<=100&&(this.quality=e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageFormat",{set:function(e){/^(gif|jpe?g|tiff|png|webp|bmp)$/i.test(e)&&(this.format=e,this.isFormatDefined=!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageUrl",{set:function(e){e&&(this.url=e,this.lastUpdate!==Date.now()&&(this.open(),this.lastUpdate=Date.now()))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageBase64",{set:function(e){e&&/^data:image\/([a-zA-Z]*);base64,([^\"]*)$/.test(e)&&(this.imageUrl=e,this.isFormatDefined||(this.format=e.split(",")[0].split(";")[0].split(":")[1].split("/")[1]))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageChangedEvent",{set:function(e){var t=this;if(e){var o=e.target.files[0];if(o&&/\.(gif|jpe?g|tiff|png|webp|bmp)$/i.test(o.name)){this.isFormatDefined||(this.format=e.target.files[0].type.split("/")[1]);var i=new FileReader;i.onload=function(e){t.imageUrl=e.target.result},i.readAsDataURL(e.target.files[0])}}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageFile",{set:function(e){var t=this;if(e&&/\.(gif|jpe?g|tiff|png|webp|bmp)$/i.test(e.name)){this.isFormatDefined||(this.format=e.type.split("/")[1]);var o=new FileReader;o.onload=function(e){t.imageUrl=e.target.result},o.readAsDataURL(e)}},enumerable:!0,configurable:!0}),e.prototype.onImageLoad=function(e){var t=this;e.addEventListener("ready",(function(){t.roundCropper&&(document.getElementsByClassName("cropper-view-box")[0].style.borderRadius="50%",document.getElementsByClassName("cropper-face")[0].style.borderRadius="50%")})),this.cropper=new o(e,{aspectRatio:this.aspectRatio,autoCropArea:this.autoCropArea,autoCrop:this.autoCrop,modal:this.mask,guides:this.guides,center:this.centerIndicator,viewMode:this.viewMode,scalable:this.scalable,zoomable:this.zoomable,cropBoxMovable:this.cropBoxMovable,cropBoxResizable:this.cropBoxResizable})},e.prototype.rotateRight=function(){this.cropper.rotate(45)},e.prototype.rotateLeft=function(){this.cropper.rotate(-45)},e.prototype.crop=function(){this.cropper.setDragMode("crop")},e.prototype.move=function(){this.cropper.setDragMode("move")},e.prototype.zoom=function(e){var t=Number(e.target.value);this.cropper.zoom(t-this.prevZoom),this.prevZoom=t},e.prototype.zoomIn=function(){this.cropper.zoom(.1)},e.prototype.zoomOut=function(){this.cropper.zoom(-.1)},e.prototype.flipH=function(){this.cropper.scaleX(-this.cropper.getImageData().scaleX)},e.prototype.flipV=function(){this.cropper.scaleY(-this.cropper.getImageData().scaleY)},e.prototype.reset=function(){this.cropper.reset()},e.prototype.export=function(){var e,t=this;e=this.resizeToWidth&&this.resizeToHeight?this.cropper.getCroppedCanvas({width:this.resizeToWidth,imageSmoothingEnabled:this.imageSmoothingEnabled,imageSmoothingQuality:this.imageSmoothingQuality}):this.resizeToHeight?this.cropper.getCroppedCanvas({height:this.resizeToHeight,imageSmoothingEnabled:this.imageSmoothingEnabled,imageSmoothingQuality:this.imageSmoothingQuality}):this.resizeToWidth?this.cropper.getCroppedCanvas({width:this.resizeToWidth,imageSmoothingEnabled:this.imageSmoothingEnabled,imageSmoothingQuality:this.imageSmoothingQuality}):this.cropper.getCroppedCanvas({imageSmoothingEnabled:this.imageSmoothingEnabled,imageSmoothingQuality:this.imageSmoothingQuality}),this.outputImage=e.toDataURL("image/"+this.format,this.quality),e.toBlob((function(e){t.imageCropped.emit({base64:t.outputImage,file:new File([e],Date.now()+"."+t.format,{type:"image/"+t.format})})}),"image/"+this.format,this.quality/100)},e.prototype.open=function(){this.modalService.open(this.content,{size:this.modalSize,centered:this.modalCentered,backdrop:"static"})},e.decorators=[{type:t.Component,args:[{selector:"ngx-photo-editor",template:'<ng-template id="ngx-photo-editor-modal" #ngxPhotoEditorContent let-modal>\r\n <div [style.backgroundColor]="darkTheme?\'#36393F\':\'#D8D8D8\'" class="modal-body" style="padding-bottom: 0">\r\n <h5 [style.color]="darkTheme?\'white\':\'black\'" style="margin-bottom: 16px">{{modalTitle}}</h5>\r\n <div [style.height]="canvasHeight+\'px\'" class="ngx-photo-editor-img-container">\r\n <img #image (load)="onImageLoad(image)" [src]="url" crossorigin id="ngx-photo-editor-image">\r\n </div>\r\n </div>\r\n \x3c!-- <div style="padding: 5px 16px" [style.backgroundColor]="darkTheme?\'#36393F\':\'#D8D8D8\'">--\x3e\r\n \x3c!-- <input type="range" style="height: 1px; margin: 0" class="custom-range" max="1" min="0" value="0" step="0.1" id="customRange1" (change)="zoom($event)">--\x3e\r\n \x3c!-- </div>--\x3e\r\n <div class="ngx-photo-editor-icons-container">\r\n <i (click)="crop()" class="fas fa-crop-alt"></i>\r\n <i (click)="move()" class="fas fa-arrows-alt"></i>\r\n <i (click)="zoomIn()" class="fas fa-search-plus"></i>\r\n <i (click)="zoomOut()" class="fas fa-search-minus"></i>\r\n <i (click)="flipV()" class="fas fa-arrows-alt-v"></i>\r\n <i (click)="flipH()" class="fas fa-arrows-alt-h"></i>\r\n <i (click)="rotateLeft()" class="fas fa-undo-alt"></i>\r\n <i (click)="rotateRight()" class="fas fa-redo-alt"></i>\r\n <i (click)="reset()" class="fas fa-sync-alt"></i>\r\n </div>\r\n <div [style.backgroundColor]="darkTheme?\'#36393F\':\'#D8D8D8\'" class="ngx-photo-editor-custom-modal-footer">\r\n <button (click)="export(); modal.close();" class="btn btn-primary" type="button">Apply</button>\r\n <button (click)="modal.close()" [class.btn-outline-dark]="!darkTheme" [class.btn-outline-light]="darkTheme"\r\n class="btn"\r\n type="button">Cancel\r\n </button>\r\n </div>\r\n</ng-template>\r\n',encapsulation:t.ViewEncapsulation.None,styles:["@import url(https://use.fontawesome.com/releases/v5.8.2/css/all.css);.ngx-photo-editor-ngx-photo-editor-img-container{width:100%;float:left}#ngx-photo-editor-image{display:block;max-width:100%}.ngx-photo-editor-modal-content{border:none;border-radius:5px;overflow:hidden}.ngx-photo-editor-icons-container{background-color:#8f8f8f;color:#fff;padding:15px;text-align:center;outline:0;border:none}.ngx-photo-editor-icons-container>i{padding-right:15px;transition:color .5s;cursor:pointer}.ngx-photo-editor-icons-container>i:nth-child(even){padding-right:30px}.ngx-photo-editor-icons-container>i:last-child{padding-right:0}.ngx-photo-editor-icons-container>i:hover{color:#000}.ngx-photo-editor-custom-modal-footer{padding:16px}.ngx-photo-editor-custom-modal-footer>button{padding:5px 20px!important;font-size:12px!important;float:right;margin-left:10px}/*!\r\n * Cropper.js v1.5.7\r\n * https://fengyuanchen.github.io/cropperjs\r\n *\r\n * Copyright 2015-present Chen Fengyuan\r\n * Released under the MIT license\r\n *\r\n * Date: 2020-05-23T05:22:57.283Z\r\n */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:rgba(51,153,255,.75) solid 1px;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:calc(100% / 3);left:0;top:calc(100% / 3);width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:calc(100% / 3);top:0;width:calc(100% / 3)}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center::after,.cropper-center::before{background-color:#eee;content:' ';display:block;position:absolute}.cropper-center::before{height:1px;left:-3px;top:0;width:7px}.cropper-center::after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se::before{background-color:#39f;bottom:-50%;content:' ';display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}"]}]}],e.ctorParameters=function(){return[{type:i.NgbModal}]},e.propDecorators={content:[{type:t.ViewChild,args:["ngxPhotoEditorContent",{static:!1}]}],modalTitle:[{type:t.Input}],aspectRatio:[{type:t.Input}],autoCropArea:[{type:t.Input}],autoCrop:[{type:t.Input}],mask:[{type:t.Input}],guides:[{type:t.Input}],centerIndicator:[{type:t.Input}],viewMode:[{type:t.Input}],modalSize:[{type:t.Input}],modalCentered:[{type:t.Input}],scalable:[{type:t.Input}],zoomable:[{type:t.Input}],cropBoxMovable:[{type:t.Input}],cropBoxResizable:[{type:t.Input}],darkTheme:[{type:t.Input}],roundCropper:[{type:t.Input}],canvasHeight:[{type:t.Input}],resizeToWidth:[{type:t.Input}],resizeToHeight:[{type:t.Input}],imageSmoothingEnabled:[{type:t.Input}],imageSmoothingQuality:[{type:t.Input}],imageCropped:[{type:t.Output}],imageQuality:[{type:t.Input}],imageFormat:[{type:t.Input}],imageUrl:[{type:t.Input}],imageBase64:[{type:t.Input}],imageChangedEvent:[{type:t.Input}],imageFile:[{type:t.Input}]},e}();var p=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[r],imports:[i.NgbModalModule],exports:[r]}]}],e}();e.NgxPhotoEditorComponent=r,e.NgxPhotoEditorModule=p,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-photo-editor.umd.min.js.map