mc-image-editor/bundles/mc-image-editor.umd.min.js

An image editor library for magic-cut app (http://www.magic-cut.in/)

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("lodash"),require("rxjs")):"function"==typeof define&&define.amd?define("mc-image-editor",["exports","@angular/core","@angular/common","lodash","rxjs"],t):t((e=e||self)["mc-image-editor"]={},e.ng.core,e.ng.common,e._,e.rxjs)}(this,(function(e,t,i,o,n){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */Object.create;function r(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var o,n,r=i.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(o=r.next()).done;)s.push(o.value)}catch(e){n={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(n)throw n.error}}return s}function s(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}Object.create;var a=function(){function e(){this.scopes={}}return e.prototype.scope=function(e){return this.scopes[e]||(this.scopes[e]=[]),this.scopes[e]},e}();a.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new a},token:a,providedIn:"root"}),a.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}];var h=function(){function e(e){this.fileRepositoryService=e,this.fileAppend=new t.EventEmitter,this.accept="*",this.scope=""}return Object.defineProperty(e.prototype,"multiple",{get:function(){return this._multiple},set:function(e){this._multiple=void 0!==e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"dropzone",{get:function(){return this._dropzone},set:function(e){this._dropzone=void 0!==e,this._dropzone||(this._multiple=!0)},enumerable:!1,configurable:!0}),e.prototype.onDragOver=function(e){e.stopPropagation(),e.preventDefault()},e.prototype.onDrop=function(e){e.stopPropagation(),e.preventDefault()},e.prototype.readFiles=function(e){var t=this,i=s(e).map((function(e){if(e.type.match(t.accept.replace("*",".*")))return t.fileRepositoryService.scope(t.scope).push(e),e}));return this.fileAppend.emit(i),i},e.prototype.onFilesAppend=function(e){this.fileAppend.emit(this.readFiles(e))},e}();h.decorators=[{type:t.Component,args:[{selector:"mc-file-reader",template:'<div *ngIf="dropzone" (drop)="onFilesAppend($event.dataTransfer.files)">\n\t<ng-content></ng-content>\n</div>\n<input\n\t*ngIf="!dropzone"\n\ttype="file"\n\t[multiple]="multiple"\n\t[accept]="accept"\n\t(change)="readFiles($event.target.files)"\n/>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[""]}]}],h.ctorParameters=function(){return[{type:a}]},h.propDecorators={fileAppend:[{type:t.Output}],accept:[{type:t.Input}],scope:[{type:t.Input}],multiple:[{type:t.Input}],dropzone:[{type:t.Input}],onDragOver:[{type:t.HostListener,args:["dragover",["$event"]]}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}]};var p=function(){function e(){this.name="crop"}return e.prototype.apply=function(e,t,i,o,n,r,s,a,h,p){e.drawImage(t,i,o,n,r,s,a,h,p)},e}();p.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new p},token:p,providedIn:"root"}),p.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}];var d=function(e){this.imageCropper=e};d.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new d(t.ɵɵinject(p))},token:d,providedIn:"root"}),d.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],d.ctorParameters=function(){return[{type:p}]};var c=function(){function e(e,t){var i=this;this.editor=t,this.image=new Image,this.imageLoaded=new n.ReplaySubject,this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d");var o=new FileReader;e instanceof File&&(this.name=e.name),n.fromEvent(o,"load").subscribe((function(e){i.image.src=e.target.result})),n.fromEvent(this.image,"load").subscribe((function(e){i.imageLoaded.next(e)})),o.readAsDataURL(e)}return Object.defineProperty(e.prototype,"ready",{get:function(){return this.imageLoaded.asObservable()},enumerable:!1,configurable:!0}),e.prototype.apply=function(e){for(var t=this,i=[],o=1;o<arguments.length;o++)i[o-1]=arguments[o];return this.ready.subscribe((function(){var o;(o=t.editor[e]).apply.apply(o,s([t.context,t.image],i))})),this},e.prototype.applyCustom=function(e){var t=this;return this.ready.subscribe((function(){e(t.context,t.image)})),this},e.prototype.getDataURL=function(e,t){return void 0===e&&(e="image/png"),void 0===t&&(t=.92),this.dataURL=this.canvas.toDataURL(e,t),this.dataURL},e.prototype.getBlob=function(e,t){void 0===e&&(e="image/png"),void 0===t&&(t=.92);for(var i=this.canvas.toDataURL(e,t),o=atob(i.split(",")[1]),n=o.length,r=new Uint8Array(n),s=0;s<n;s++)r[s]=o.charCodeAt(s);return this.blob=new Blob([r],{type:e}),this.blob.hasDataURL=!0,this.blob.toJSON=function(){return{name:this.name,size:this.size,type:this.type,dataURL:i}},this.blob.toString=this.blob.toJSON,this.blob},e}(),m=function(){function e(e){for(var t in this.features={},e)e[t]&&this.registerFeature(e[t])}return e.prototype.registerFeature=function(e){if(this.features[e.name]&&this.features[e.name]===e)throw new Error(e.name+" is already registered");this.features[e.name]=e},e.prototype.edit=function(e){return new c(e,this.features)},e}();m.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new m(t.ɵɵinject(d))},token:m,providedIn:"root"}),m.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],m.ctorParameters=function(){return[{type:d}]};var u=function(){function e(e,i){this.editor=e,this.el=i,this.imagePosition={x:0,y:0},this.originalImageDimensions={width:0,height:0},this.imageDimensions={width:0,height:0},this.zoomConfig={value:1,max:4},this.configChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"image",{set:function(e){this.initImageCrop(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"zoom",{get:function(){return this.zoomConfig.value},set:function(e){var t=this;this.editable.ready.subscribe((function(){t.setZoom(e)}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"top",{get:function(){return this.imagePosition.y},set:function(e){var t=this;this.editable.ready.subscribe((function(){t.imagePosition.y=0,t.moveDelta={y:0,x:t.imagePosition.x},t.move({clientY:parseInt(e,10),clientX:t.imagePosition.x}),delete t.moveDelta}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"left",{get:function(){return this.imagePosition.x},set:function(e){var t=this;this.editable.ready.subscribe((function(){t.imagePosition.x=0,t.moveDelta={x:0,y:t.imagePosition.y},t.move({clientX:parseInt(e,10),clientY:t.imagePosition.y}),delete t.moveDelta}))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"maxZoom",{get:function(){return this.zoomConfig.max},set:function(e){this.zoomConfig.max=parseFloat(e)},enumerable:!1,configurable:!0}),e.prototype.triggerMove=function(){return window.addEventListener("mousemove",this.eventListeners.mousemove,!1),window.addEventListener("mouseup",this.eventListeners.mouseup,!1),!1},e.prototype.initImageCrop=function(e){var t=this;this.editable=this.editor.edit(e),this.editable.ready.subscribe((function(){var e=t.getComputedDimensions(t.el.nativeElement),i=t.fitArea({width:t.cropWidth,height:t.cropHeight},{width:e.width,height:e.height}),o=t.addTransparentBorder(e,i),n=o.vborder,r=o.hborder;t.borders={vborder:n,hborder:r};var s=t.fillArea({width:t.editable.image.width,height:t.editable.image.height},{width:i.width,height:i.height});t.editable.canvas.width=t.cropWidth,t.editable.canvas.height=t.cropHeight,t.previewImage.nativeElement.src=t.editable.image.src;var a=t.previewImage.nativeElement;a.style.left=r+(i.width-s.width)/2+"px",a.style.top=n+(i.height-s.height)/2+"px",a.style.width=s.width+"px",a.style.height=s.height+"px",t.originalImageDimensions=s,t.imageDimensions.width=s.width,t.imageDimensions.height=s.height,t.cropDimensions=i,t.imagePosition={x:r+(i.width-s.width)/2,y:n+(i.height-s.height)/2}})),this.eventListeners={mousemove:this.move.bind(this),mouseup:this.stopMove.bind(this)}},e.prototype.move=function(e){this.moveDelta||(this.moveDelta={x:e.clientX,y:e.clientY}),this.imagePosition.x+=e.clientX-this.moveDelta.x,this.imagePosition.y+=e.clientY-this.moveDelta.y,this.moveDelta.x=e.clientX,this.moveDelta.y=e.clientY;var t=this.getCorrectedPosition(this.imagePosition);return this.previewImage.nativeElement.style.left=t.x+"px",this.imagePosition.x=t.x,this.previewImage.nativeElement.style.top=t.y+"px",this.imagePosition.y=t.y,!1},e.prototype.setZoom=function(e){var t=this,i=parseFloat(e);i<=0&&(i=1),i>this.zoomConfig.max&&(i=this.zoomConfig.max),this.zoomConfig.value=i;var o={width:this.originalImageDimensions.width*this.zoomConfig.value,height:this.originalImageDimensions.height*this.zoomConfig.value},n=o.width-this.imageDimensions.width,r=o.height-this.imageDimensions.height;this.imageDimensions.width=o.width,this.imageDimensions.height=o.height;var s=this.previewImage.nativeElement;s.style.width=o.width+"px",s.style.height=o.height+"px";var a,h=this.getCorrectedPosition({x:this.imagePosition.x-n/2,y:this.imagePosition.y-r/2});s.style.left=h.x+"px",s.style.top=h.y+"px",this.imagePosition.x=h.x,this.imagePosition.y=h.y,s.className="zooming",a=function(){s.className="",s.removeEventListener("transitionend",a),t.configChange.emit({left:t.imagePosition.x,top:t.imagePosition.y,zoom:t.zoom})},s.addEventListener("transitionend",a)},e.prototype.getBlob=function(){return this.crop(),this.editable.getBlob()},e.prototype.getDataURL=function(){return this.crop(),this.editable.getDataURL()},e.prototype.crop=function(){var e=this.imageDimensions.width/this.editable.image.width,t=(this.borders.hborder-this.imagePosition.x)/e,i=(this.borders.vborder-this.imagePosition.y)/e,o=this.cropDimensions.width/e,n=o/(this.cropWidth/this.cropHeight);this.editable.apply("crop",t,i,o,n,0,0,this.cropWidth,this.cropHeight)},e.prototype.getCorrectedPosition=function(e){var t={x:0,y:0},i=this.cropDimensions.width-this.imageDimensions.width,o=this.cropDimensions.height-this.imageDimensions.height;return e.x<this.borders.hborder?e.x<this.borders.hborder+i?t.x=this.borders.hborder+i:t.x=e.x:t.x=this.borders.hborder,e.y<this.borders.vborder?e.y<this.borders.vborder+o?t.y=this.borders.vborder+o:t.y=e.y:t.y=this.borders.vborder,t},e.prototype.stopMove=function(){return delete this.moveDelta,window.removeEventListener("mousemove",this.eventListeners.mousemove),window.removeEventListener("mouseup",this.eventListeners.mouseup),this.configChange.emit({left:this.imagePosition.x,top:this.imagePosition.y,zoom:this.zoom}),!1},e.prototype.fitArea=function(e,t){var i=e.height/t.height,o=e.width/t.width,n=i>o?i:o;return{width:e.width/n,height:e.height/n}},e.prototype.fillArea=function(e,t){var i=e.height/t.height,o=e.width/t.width,n=i>o?o:i;return{width:e.width/n,height:e.height/n}},e.prototype.addTransparentBorder=function(e,t){var i=(e.height-t.height)/2,n=(e.width-t.width)/2,r=o(this.el.nativeElement.childNodes).find((function(e){return!!e.className&&e.className.indexOf("border")>=0}));window.getComputedStyle(r);return r&&(r.style.borderBottomWidth=i+"px",r.style.borderTopWidth=i+"px",r.style.borderLeftWidth=n+"px",r.style.borderRightWidth=n+"px"),{vborder:i,hborder:n}},e.prototype.getComputedDimensions=function(e){var t=window.getComputedStyle(e);return{width:parseInt(t.width,10),height:parseInt(t.height,10)}},e}();u.decorators=[{type:t.Component,args:[{selector:"mc-image-cropper",template:'<img #previewImage />\n<div class="border"></div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".border{box-sizing:border-box;height:100%;left:0;position:absolute;top:0;width:100%}:host{cursor:move;display:block;overflow:hidden;position:relative}img{position:absolute}img.zooming{transition:width .3s,height .3s,top .3s,left .3s}/deep/ .border{border:0 solid rgba(0,0,0,.3)}"]}]}],u.ctorParameters=function(){return[{type:m},{type:t.ElementRef}]},u.propDecorators={configChange:[{type:t.Output}],image:[{type:t.Input,args:["src"]}],cropWidth:[{type:t.Input}],cropHeight:[{type:t.Input}],zoom:[{type:t.Input}],top:[{type:t.Input}],left:[{type:t.Input}],maxZoom:[{type:t.Input}],previewImage:[{type:t.ViewChild,args:["previewImage"]}],triggerMove:[{type:t.HostListener,args:["mousedown"]}]};var g=function(){};g.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[h,u],exports:[h,u]}]}],e.FileReaderComponent=h,e.FileRepositoryService=a,e.ImageCropperComponent=u,e.ImageEditorModule=g,e.ImageEditorService=m,e.ɵa=d,e.ɵb=p,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=mc-image-editor.umd.min.js.map