image-resizer-cropper/bundles/image-resizer-cropper.umd.min.js

A simple image crop with resizing built for Angular 7, compatible with Angular Universal (SSR).

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("image-resizer-cropper",["exports","@angular/core","@angular/common"],t):t(e["image-resizer-cropper"]={},e.ng.core,e.ng.common)}(this,function(e,n,i){"use strict";var t=function(){function e(e,t,r){this._el=e,this._renderer=t,this.platformId=r,this.croppedImage=new n.EventEmitter(null),this.error=new n.EventEmitter(null),this.isDown=!1,this.offSet=[],this.isBrowser=i.isPlatformBrowser(this.platformId),this.isBrowser&&(this.canvasOne=this._renderer.createElement("canvas"),this.contextOne=this.canvasOne.getContext("2d"),this.canvasTwo=this._renderer.createElement("canvas"),this.contextTwo=this.canvasTwo.getContext("2d"),this.canvasThree=this._renderer.createElement("canvas"),this.contextThree=this.canvasThree.getContext("2d"),this.canvasFour=this._renderer.createElement("canvas"),this.contextFour=this.canvasFour.getContext("2d"),this.imgOne=this._renderer.createElement("img"),this.imgTwo=this._renderer.createElement("img"))}return Object.defineProperty(e.prototype,"crContainer",{get:function(){return this._el.nativeElement.querySelector(".cr-container")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"crRange",{get:function(){return this._el.nativeElement.querySelector("#cr-range")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"crImage",{get:function(){return this._el.nativeElement.querySelector("#cr-image")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"crLens",{get:function(){return this._el.nativeElement.querySelector("#cr-lens")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"btn",{get:function(){return this._el.nativeElement.querySelector("#crop")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"testImg",{get:function(){return this._el.nativeElement.querySelector("#test-img")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"finalCrop",{get:function(){return this._el.nativeElement.querySelector("#final-crop")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"fileUpload",{get:function(){return this._el.nativeElement.querySelector("#file-upload")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.sourceImage&&this.sourceImage.target&&this.sourceImage.target.files&&this.parseFile(this.sourceImage)},e.prototype.ngAfterViewInit=function(){this.sourceImage&&(this.imgOne&&this._renderer.setProperty(this.imgOne,"src",this.crImage.getAttribute("src")),this.setUpListeners(),this.setUpConfigurations())},e.prototype.ngOnChanges=function(e){e.sourceImage&&!e.sourceImage.firstChange&&e.sourceImage.currentValue&&(this.clearImagePosition(),e.sourceImage.currentValue.target&&e.sourceImage.currentValue.target.files?this.parseFile(this.sourceImage):this.imgOne&&(this._renderer.setProperty(this.imgOne,"src",this.crImage.getAttribute("src")),this.setUpListeners(),this.setUpConfigurations()))},e.prototype.setUpListeners=function(){var t=this;this.isBrowser&&(this._renderer.listen(this.crRange,"input",function(e){t.linkImageToRangeInput(e.target.value)}),this._renderer.listen(this.crImage,"mousedown",function(e){t.mouseDownOnImage(e)}),this._renderer.listen(this.crImage,"mouseup",function(e){t.mouseUpOnImage(),t.autoCrop&&t.resizeAndCropImage()}),this._renderer.listen(this.crImage,"mousemove",function(e){e.preventDefault(),t.mouseMoveOnImage(e)}),this._renderer.listen(this.crContainer,"mouseout",function(e){t.keepMouseMoveInsideContainer()}),this._renderer.listen(this.btn,"click",function(e){t.resizeAndCropImage()}))},e.prototype.setUpConfigurations=function(){this.setBorderColor(),this.setBackgroundOpacity(),this.setLensHeightAndWidth()},e.prototype.linkImageToRangeInput=function(e){var t=e/100;this.crImage.style.transform="scale("+t+")"},e.prototype.mouseDownOnImage=function(e){this.isDown=!0,this.offSet=[e.target.offsetLeft-e.clientX,e.target.offsetTop-e.clientY]},e.prototype.mouseUpOnImage=function(){this.isDown=!1},e.prototype.mouseMoveOnImage=function(e){if(this.isDown){var t=e.clientX,r=e.clientY;this.crImage.style.left=t+this.offSet[0]+"px",this.crImage.style.top=r+this.offSet[1]+"px"}},e.prototype.keepMouseMoveInsideContainer=function(){this.isDown=!1},e.prototype.checkForOverlap=function(e,t){e.length&&1<e.length&&(e=e[0]),t.length&&1<t.length&&(t=t[0]);var r=e instanceof Element&&e.getBoundingClientRect(),n=t instanceof Element&&t.getBoundingClientRect(),i=null;return r&&n?[i=!(r.right<n.left||r.left>n.right||r.bottom<n.top||r.top>n.bottom),r,n]:[i,r,n]},e.prototype.getResizeRatio=function(){var e=this.crImage.style.transform,t=e.substring(e.indexOf("(")+1,e.indexOf(")")).split(",");return 0<t.length?t[0]:null},e.prototype.drawImageResize=function(){var e=this.getResizeRatio();this.canvasTwo.width=this.imgOne.width,this.canvasTwo.height=this.imgOne.height,this.contextTwo.drawImage(this.imgOne,0,0),this.canvasOne.width=this.imgOne.width*e,this.canvasOne.height=this.imgOne.height*e,this.contextOne.drawImage(this.canvasTwo,0,0,this.canvasTwo.width,this.canvasTwo.height,0,0,this.canvasOne.width,this.canvasOne.height);var t=this.canvasOne.toDataURL("image/png",100);return this.testImg&&this._renderer.setProperty(this.testImg,"src",t),t},e.prototype.drawImageCrop=function(e){var o=this,s=this.checkForOverlap(this.crLens,this.crImage);if(this.imgTwo)return this._renderer.setProperty(this.imgTwo,"src",e),new Promise(function(i,e){o._renderer.listen(o.imgTwo,"load",function(e){if(o.canvasThree.width=e.target.width,o.canvasThree.height=e.target.height,o.contextThree.drawImage(o.imgTwo,0,0),o.canvasFour.width=o.lensWidth,o.canvasFour.height=o.lensHeight,s){var t=s[1].x-s[2].x,r=s[1].y-s[2].y;o.contextFour.drawImage(o.canvasThree,t,r,o.lensWidth,o.lensHeight,0,0,o.lensWidth,o.lensHeight),o.roundCrop&&(o.contextFour.globalCompositeOperation="destination-in",o.contextFour.beginPath(),o.contextFour.arc(o.lensWidth/2,o.lensHeight/2,o.lensHeight/2,0,2*Math.PI),o.contextFour.closePath(),o.contextFour.fill());var n=o.canvasFour.toDataURL("image/png",100);o.cropAvailable=!0,setTimeout(function(){o.finalCrop&&o._renderer.setProperty(o.finalCrop,"src",n)}),i(n)}})})},e.prototype.resizeAndCropImage=function(){var t=this,e=this.drawImageResize();this.drawImageCrop(e).then(function(e){t.croppedImage.emit(e),console.log(e)})},e.prototype.setLensHeightAndWidth=function(){this.lensHeight&&150!==this.lensHeight&&this._renderer.setStyle(this.crLens,"height",this.lensHeight+"px"),this.lensWidth&&150!==this.lensWidth&&this._renderer.setStyle(this.crLens,"width",this.lensWidth+"px"),this.roundCrop&&this._renderer.addClass(this.crLens,"rounded")},e.prototype.setBorderColor=function(){var t=this;this.borderColor&&(this._renderer.setStyle(this.crContainer,"border-color",this.borderColor),this._renderer.setStyle(this.crLens,"border-color",this.borderColor),this.crLens.querySelectorAll("span").forEach(function(e){t._renderer.setStyle(e,"border-color",t.borderColor)}))},e.prototype.setBackgroundOpacity=function(){this.backgroundOpacity&&this.crLens&&this._renderer.setStyle(this.crLens,"box-shadow","0 0 0 200000px rgba(0, 0, 0, "+this.backgroundOpacity+")")},e.prototype.parseFile=function(e){var r=this,t=e.target.files[0];if("image/png"===t.type||"image/jpeg"===t.type||"image/gif"===t.type||"image/tiff"===t.type){var n=new FileReader;n.readAsDataURL(t),n.addEventListener("load",function(e){var t=n.result.toString();r._renderer.setProperty(r.crImage,"src",t),r.loadedSourceImage=r.crImage.getAttribute("src"),r._renderer.setProperty(r.imgOne,"src",r.crImage.getAttribute("src")),r.setUpListeners(),r.setUpConfigurations()}),n.onerror=function(){console.log("there are some problems")}}else this.loadedSourceImage=null,this.crContainer&&this._renderer.addClass(this.crContainer,"error"),this.errorMessage="Invalid file type.",this.error.emit(this.errorMessage)},e.prototype.clearImagePosition=function(){this.crImage&&(this.crImage.style.left="auto",this.crImage.style.top="auto")},e.decorators=[{type:n.Component,args:[{selector:"irc-image-resizer-cropper",template:'<ng-container *ngIf="sourceImage">\n  <div class="cr-container">\n    <div id="cr-lens">\n      <span></span>\n      <span></span>\n      <span></span>\n      <span></span>\n    </div>\n    <img\n      src="{{ loadedSourceImage }}"\n      style="transform: scale(1);"\n      draggable="false"\n      id="cr-image"\n    />\n    <div *ngIf="errorMessage" id="error-message">{{ errorMessage }}</div>\n  </div>\n  <div class="cr-range-selector">\n    <input type="range" id="cr-range" min="10" max="200" />\n  </div>\n  <div class="text-center">\n    <button id="crop" type="button">Crop</button>\n  </div>\n  <div>\n    <img src="#" id="test-img" style="display:none;" />\n    <img src="#" *ngIf="previewCrop && cropAvailable" id="final-crop" />\n  </div>\n</ng-container>\n',styles:[".text-center{text-align:center}.cr-container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;min-height:300px;margin:0 auto;overflow:hidden;border:2px dashed #333}.cr-range-selector{margin:1rem 0;text-align:center}#cr-lens{height:150px;width:150px;border:2px solid #333;z-index:999999;box-shadow:0 0 0 200000px rgba(0,0,0,.2);position:relative}#cr-lens.rounded{border-radius:50%}#cr-lens span{position:absolute;width:15px;height:15px}#cr-lens span:nth-child(1){top:-17px;left:-17px;border-right:2px dashed #333;border-bottom:2px dashed #333}#cr-lens span:nth-child(2){top:-17px;right:-17px;border-left:2px dashed #333;border-bottom:2px dashed #333}#cr-lens span:nth-child(3){bottom:-17px;right:-17px;border-left:2px dashed #333;border-top:2px dashed #333}#cr-lens span:nth-child(4){bottom:-17px;left:-17px;border-right:2px dashed #333;border-top:2px dashed #333}#cr-image{display:block;position:absolute;-webkit-transform-origin:center center;transform-origin:center center;cursor:move}"]}]}],e.ctorParameters=function(){return[{type:n.ElementRef},{type:n.Renderer2},{type:Object,decorators:[{type:n.Inject,args:[n.PLATFORM_ID]}]}]},e.propDecorators={sourceImage:[{type:n.Input}],lensHeight:[{type:n.Input}],lensWidth:[{type:n.Input}],autoCrop:[{type:n.Input}],previewCrop:[{type:n.Input}],roundCrop:[{type:n.Input}],borderColor:[{type:n.Input}],backgroundOpacity:[{type:n.Input}],croppedImage:[{type:n.Output}],error:[{type:n.Output}]},e}(),r=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{imports:[i.CommonModule],declarations:[t],exports:[t]}]}],e}();e.ImageResizerCropperComponent=t,e.ImageResizerCropperModule=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=image-resizer-cropper.umd.min.js.map