UNPKG

ngx-cropperjs-wrapper

Version:

This angular library is a wrapper of Javascript image cropper

2 lines 9.35 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("cropperjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-cropperjs-wrapper",["exports","@angular/core","@angular/forms","cropperjs","@angular/common"],t):t(e["ngx-cropperjs-wrapper"]={},e.ng.core,e.ng.forms,null,e.ng.common)}(this,function(e,t,o,p,r){"use strict";p=p&&p.hasOwnProperty("default")?p["default"]:p;var i=function(){function e(){this.crop=new t.EventEmitter,this.cropMove=new t.EventEmitter,this.cropStart=new t.EventEmitter,this.cropEnd=new t.EventEmitter,this.ready=new t.EventEmitter,this.zoom=new t.EventEmitter,this.init=new t.EventEmitter,this.fail=new t.EventEmitter,this.fileChange=new t.EventEmitter,this.options={},this.data={},this.propagateChange=function(e){return e}}return Object.defineProperty(e.prototype,"imageFile",{get:function(){return this.originalFile},set:function(e){var t=this;if(delete this.dataUrl,this.destroyCropperIfExists(),e)if(-1!==["image/gif","image/jpeg","image/png"].indexOf(e.type)){var o=new FileReader;o.onload=function(){t.dataUrl=o.result},this.originalFile=e,o.readAsDataURL(this.originalFile)}else this.fail.emit(new Error("Invalid input file type"))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"imageUrl",{set:function(e){delete this.dataUrl,this.destroyCropperIfExists(),e&&(this.dataUrl=e)},enumerable:!0,configurable:!0}),e.prototype.writeValue=function(e){this.data=e,this.data&&this.cropper&&this.cropper.setData(this.data)},e.prototype.registerOnChange=function(e){this.propagateChange=e},e.prototype.registerOnTouched=function(){},e.prototype.ngOnDestroy=function(){this.destroyCropperIfExists()},e.prototype.onImageLoad=function(e){var t=e.target;if(this.destroyCropperIfExists(),this.options.minCropWidth&&t.naturalWidth<this.options.minCropWidth||this.options.minCropHeight&&t.naturalHeight<this.options.minCropHeight)return delete this.dataUrl,void this.fail.emit(new Error("Input image is too small"));this.isReady=!1,this.cropper=new p(t,Object.assign({crop:this.onCrop.bind(this),cropmove:this.onCropMove.bind(this),cropstart:this.onCropStart.bind(this),cropend:this.onCropEnd.bind(this),ready:this.onReady.bind(this),zoom:this.onZoom.bind(this)},this.options)),this.init.emit(this.cropper)},e.prototype.onCrop=function(e){0!==this.options.viewMode&&this.correctCropArea(),this.isReady&&this.update(),this.crop.emit(e)},e.prototype.onCropMove=function(e){0===this.options.viewMode&&this.correctCropArea(),this.update(),this.cropMove.emit(e)},e.prototype.onCropStart=function(e){this.update(),this.cropStart.emit(e)},e.prototype.onCropEnd=function(e){this.correctCropArea(),this.updateFile(),this.update(),this.cropEnd.emit(e)},e.prototype.onReady=function(e){this.data?(this.cropper.setData(this.data),this.correctCropArea()):(this.correctCropArea(),this.update()),this.isReady=!0,this.ready.emit(e),this.updateFile()},e.prototype.onZoom=function(e){this.update(),this.zoom.emit(e)},e.prototype.updateFile=function(){var t=this,o="cropped_file";if("string"==typeof this.dataUrl){var e=this.dataUrl.split("/");o=e[e.length-1]}var p=this.options.outputOptions&&this.options.outputOptions.mimeType||"image/png",r=this.options.outputOptions&&this.options.outputOptions.qualityArgument||.9;this.cropper.getCroppedCanvas().toBlob(function(e){e.lastModifiedDate=new Date,e.name=t.originalFile?t.originalFile.name:o,t.fileChange.emit(e)},p,r)},e.prototype.correctCropArea=function(){var e=this.cropper.getData();(e.height<this.options.minCropHeight||e.width<this.options.minCropWidth)&&(e.width=Math.max(e.width,this.options.minCropWidth||0),e.height=Math.max(e.height,this.options.minCropHeight||0),this.cropper.setData(e))},e.prototype.update=function(){this.data=this.cropper.getData(),this.propagateChange(this.data)},e.prototype.destroyCropperIfExists=function(){this.cropper&&(this.cropper.destroy(),delete this.cropper)},e.decorators=[{type:t.Component,args:[{selector:"lib-cropper",template:'<div class="cropper-component" *ngIf="dataUrl">\n <img #image alt="image" [src]="dataUrl" (load)="onImageLoad($event)"/>\n</div>\n',styles:[".cropper-component img{max-width:100%;max-height:100%}::ng-deep{/*!\n * Cropper.js v1.4.0\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2018-06-01T15:18:09.891Z\n */}::ng-deep .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}::ng-deep .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%}::ng-deep .cropper-canvas,::ng-deep .cropper-crop-box,::ng-deep .cropper-drag-box,::ng-deep .cropper-modal,::ng-deep .cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}::ng-deep .cropper-canvas,::ng-deep .cropper-wrap-box{overflow:hidden}::ng-deep .cropper-drag-box{background-color:#fff;opacity:0}::ng-deep .cropper-modal{background-color:#000;opacity:.5}::ng-deep .cropper-view-box{display:block;height:100%;outline:#eee solid 1px;overflow:hidden;width:100%}::ng-deep .cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}::ng-deep .cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}::ng-deep .cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}::ng-deep .cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}::ng-deep .cropper-center:after,::ng-deep .cropper-center:before{background-color:#eee;content:' ';display:block;position:absolute}::ng-deep .cropper-center:before{height:1px;left:-3px;top:0;width:7px}::ng-deep .cropper-center:after{height:7px;left:0;top:-3px;width:1px}::ng-deep .cropper-face,::ng-deep .cropper-line,::ng-deep .cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}::ng-deep .cropper-face{background-color:#fff;left:0;top:0}::ng-deep .cropper-line{background-color:#39f}::ng-deep .cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}::ng-deep .cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}::ng-deep .cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}::ng-deep .cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}::ng-deep .cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}::ng-deep .cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}::ng-deep .cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}::ng-deep .cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}::ng-deep .cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}::ng-deep .cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}::ng-deep .cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}::ng-deep .cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}::ng-deep .cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){::ng-deep .cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){::ng-deep .cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){::ng-deep .cropper-point.point-se{height:5px;opacity:.75;width:5px}}::ng-deep .cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:' ';display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}::ng-deep .cropper-invisible{opacity:0}::ng-deep .cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}::ng-deep .cropper-hide{display:block;height:0;position:absolute;width:0}::ng-deep .cropper-hidden{display:none!important}::ng-deep .cropper-move{cursor:move}::ng-deep .cropper-crop{cursor:crosshair}::ng-deep .cropper-disabled .cropper-drag-box,::ng-deep .cropper-disabled .cropper-face,::ng-deep .cropper-disabled .cropper-line,::ng-deep .cropper-disabled .cropper-point{cursor:not-allowed}::ng-deep .cropper-line,::ng-deep .cropper-point,::ng-deep .cropper-point.point-se::before{background-color:#eee}"],providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return e}),multi:!0}]}]}],e.propDecorators={crop:[{type:t.Output}],cropMove:[{type:t.Output}],cropStart:[{type:t.Output}],cropEnd:[{type:t.Output}],ready:[{type:t.Output}],zoom:[{type:t.Output}],init:[{type:t.Output}],fail:[{type:t.Output}],fileChange:[{type:t.Output}],options:[{type:t.Input}],imageFile:[{type:t.Input,args:["imageFile"]}],imageUrl:[{type:t.Input,args:["imageUrl"]}]},e}(),n=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule],declarations:[i],exports:[i]}]}],e}();e.CropperComponent=i,e.NgxCropperJsModule=n,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=ngx-cropperjs-wrapper.umd.min.js.map