cropo/dist/foo.umd.js

Cropo is a fast, lightweight image cropping tools for JavaScript. Resize and crop your uploaded image using a intuitive user interface.

!function(i,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((i||self).cropo={})}(this,function(i){var t=/*#__PURE__*/function(){function i(i){var t=this;this.slider=void 0,this.canvas=void 0,this.canvasContext=void 0,this.canvasWidth=0,this.canvasHeight=0,this.fit=!0,this.img=void 0,this.imgHeight=void 0,this.imgWidth=void 0,this.scale=void 0,this.baseScale=1,this.maxScale=5,this.minScale=1,this.originalWidth=void 0,this.originalHeight=void 0,this.ratio=void 0,this.isDown=void 0,this.pointerX=void 0,this.pointerY=void 0,this.netPanningX=void 0,this.netPanningY=void 0,this.originX=void 0,this.originY=void 0,this.eventCache=void 0,this.prevDiff=void 0,this.onResize=this.debounce(function(){if(t.img){var i=t.canvas.offsetWidth-t.canvasWidth,n=t.canvas.offsetHeight-t.canvasHeight;t.canvasWidth=t.canvas.width=t.canvas.offsetWidth,t.canvasHeight=t.canvas.height=t.canvas.offsetHeight,t.fit&&t.imgWidth<t.canvasWidth?(t.netPanningX=0,t.onImageLoad()):t.fit&&t.imgHeight<t.canvasHeight?(t.netPanningY=0,t.onImageLoad()):(t.netPanningX+=i/2,t.netPanningY+=n/2,t.originalWidth=t.canvasWidth,t.originalHeight=t.canvasWidth*t.ratio,t.draw()),t.fixScale()}},300),this.baseScale=(null==i?void 0:i.baseScale)||this.baseScale,this.maxScale=(null==i?void 0:i.maxScale)||this.maxScale,this.minScale=(null==i?void 0:i.minScale)||this.minScale,this.loadCanvas((null==i?void 0:i.canvas)||document.createElement("canvas"),null==i?void 0:i.width,null==i?void 0:i.height),(null==i?void 0:i.rangeInput)&&this.loadSlider(i.rangeInput),null!=i&&i.imageUrl&&this.loadImageFromUrl(null==i?void 0:i.imageUrl,null==i?void 0:i.fit,function(){t.move((null==i?void 0:i.x)||0,(null==i?void 0:i.y)||0),null==i||null==i.onImageLoad||i.onImageLoad()})}var t=i.prototype;return t.clamp=function(i,t,n){return Math.max(t,Math.min(i,n))},t.debounce=function(i,t){var n;return function(){var e=arguments;clearTimeout(n),n=setTimeout(function(){i.apply(void 0,[].slice.call(e))},t)}},t.initPointerAndZoom=function(){this.isDown=!1,this.netPanningX=0,this.netPanningY=0,this.eventCache=[],this.prevDiff=-1,this.slider&&(this.slider.value=String(this.baseScale))},t.draw=function(){var i,t;this.img&&(null==(i=this.canvasContext)||i.clearRect(0,0,this.canvasWidth,this.canvasHeight),null==(t=this.canvasContext)||t.drawImage(this.img,this.netPanningX,this.netPanningY,this.imgWidth,this.imgHeight))},t.fixScale=function(){this.scale=this.fit?Math.min(this.imgWidth/this.canvasWidth,this.imgHeight/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgHeight/this.originalHeight)||this.baseScale,this.slider&&(this.slider.value=String(this.scale))},t.onImageLoad=function(){this.fit&&(this.scale=Math.max(this.canvasHeight/this.imgHeight,this.canvasWidth/this.imgWidth),this.imgHeight*=this.scale,this.imgWidth*=this.scale),this.pointerX=this.pointerY=0,this.originalWidth=this.imgWidth,this.originalHeight=this.imgHeight,this.ratio=this.originalHeight/this.originalWidth,this.draw()},t.getPointerAverage=function(){for(var i=0,t=0,n=0;n<this.eventCache.length;n++)i+=this.eventCache[n].offsetX,t+=this.eventCache[n].offsetY;return[i/=this.eventCache.length,t/=this.eventCache.length]},t.calcOrigin=function(i,t){this.originX=(-this.netPanningX+i)/this.imgWidth,this.originY=(-this.netPanningY+t)/this.imgHeight},t.move=function(i,t){var n=i-this.pointerX,e=t-this.pointerY;this.pointerX=i,this.pointerY=t,this.netPanningX=this.fit?this.clamp(this.netPanningX+n,this.canvasWidth-this.imgWidth,0):this.netPanningX+n,this.netPanningY=this.fit?this.clamp(this.netPanningY+e,this.canvasHeight-this.imgHeight,0):this.netPanningY+e},t.drawZoom=function(i,t){this.netPanningX=this.fit?this.clamp(this.netPanningX-i*this.originX,this.canvasWidth-this.imgWidth,0):this.netPanningX-i*this.originX,this.netPanningY=this.fit?this.clamp(this.netPanningY-t*this.originY,this.canvasHeight-this.imgHeight,0):this.netPanningY-t*this.originY},t.zoomDelta=function(i,t){var n=this.imgWidth+i;n<this.originalWidth||this.imgHeight+t<this.originalHeight||n/this.originalWidth>this.maxScale||n/this.originalWidth<this.minScale||(this.slider&&(this.slider.value=String(this.scale=n/this.originalWidth)),this.imgWidth=n,this.imgHeight+=t,this.drawZoom(i,t))},t.zoomScale=function(i){if(!(i>this.maxScale||i<this.minScale)){this.prevDiff=-1;var t=this.imgWidth,n=this.imgHeight;this.imgWidth=this.originalWidth*i,this.imgHeight=this.originalHeight*i,t-=this.imgWidth,n-=this.imgHeight,this.calcOrigin(this.canvasWidth/2,this.canvasHeight/2),this.drawZoom(-t,-n)}},t.pinch=function(){if(2===this.eventCache.length){var i=Math.hypot(this.eventCache[0].offsetX-this.eventCache[1].offsetX,this.eventCache[0].offsetY-this.eventCache[1].offsetY);if(this.prevDiff>0){var t=i-this.prevDiff;this.zoomDelta(t,t*this.ratio)}this.prevDiff=i}},t.onSliderMove=function(i){this.scale=+i.target.value,this.zoomScale(this.scale),this.draw()},t.onPointerdown=function(i){if(this.img){this.eventCache.push(i);var t=this.getPointerAverage();this.pointerX=t[0],this.pointerY=t[1],this.isDown=!0}},t.onPointerUp=function(i){if(this.isDown){this.eventCache=this.eventCache.filter(function(t){return t.pointerId!==i.pointerId}),this.eventCache.length<2&&(this.prevDiff=-1);var t=this.getPointerAverage();this.pointerX=t[0],this.pointerY=t[1],0===this.eventCache.length&&(this.isDown=!1)}},t.onPointermove=function(i){if(this.isDown){for(var t=0;t<this.eventCache.length;t++)if(i.pointerId===this.eventCache[t].pointerId){this.eventCache[t]=i;break}var n=this.getPointerAverage();this.move(n[0],n[1]),this.pinch(),this.calcOrigin(this.canvasWidth/2,this.canvasHeight/2),this.draw()}},t.prevent=function(i){i.preventDefault(),i.stopPropagation()},t.leadListeners=function(){var i=this;this.canvas.addEventListener("pointerdown",function(t){i.prevent(t),i.onPointerdown(t)}),this.canvas.addEventListener("pointermove",function(t){i.prevent(t),i.onPointermove(t)}),this.canvas.addEventListener("pointerout",function(t){i.prevent(t),i.onPointerUp(t)}),this.canvas.addEventListener("pointerup",function(t){i.prevent(t),i.onPointerUp(t)}),this.canvas.addEventListener("pointercancel",function(t){i.prevent(t),i.onPointerUp(t)}),this.canvas.addEventListener("pointerleave",function(t){i.prevent(t),i.onPointerUp(t)}),new ResizeObserver(this.onResize).observe(this.canvas)},t.loadSlider=function(i){var t=this;this.slider=i,this.slider.value=String(this.scale||this.baseScale),this.slider.addEventListener("input",function(i){t.prevent(i),t.onSliderMove(i)})},t.loadCanvas=function(i,t,n){this.canvas=i,this.canvasContext=this.canvas.getContext("2d"),this.canvasWidth=this.canvas.width=t||this.canvas.offsetWidth,this.canvasHeight=this.canvas.height=n||this.canvas.offsetHeight,this.leadListeners()},t.loadImageFromUrl=function(i,t,n){var e=this;if(void 0===t&&(t=!0),!this.canvas)throw Error("first call loadCanvas");this.fit=t,this.img=new Image,this.img.onload=function(){e.initPointerAndZoom(),e.imgHeight=e.img.naturalHeight,e.imgWidth=e.img.naturalWidth,e.onImageLoad(),null==n||n()},this.img.src=i},t.getCanvas=function(i){if(!this.img)throw Error("please set an image");var t=document.createElement("canvas");return t.width=this.canvasWidth*i,t.height=this.canvasHeight*i,t.getContext("2d").drawImage(this.img,this.netPanningX*i,this.netPanningY*i,this.imgWidth*i,this.imgHeight*i),t},t.getBlob=function(i){var t=this;return void 0===i&&(i=1),new Promise(function(n){t.getCanvas(i).toBlob(function(i){n(i)})})},t.getDataUrl=function(i){return void 0===i&&(i=1),this.getCanvas(i).toDataURL()},t.download=function(i){void 0===i&&(i=1);var t=document.createElement("a");t.download="canvas.png",t.href=this.getDataUrl(i),t.click()},t.getCropInfo=function(){return{originalWidth:this.img.naturalWidth,originalHeight:this.img.naturalHeight,imgWidth:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}},i}(),n=new t({});i.Cropo=t,i.download=function(){n.download.apply(n,[].slice.call(arguments))},i.getCropInfo=function(){n.getCropInfo.apply(n,[].slice.call(arguments))},i.getDataUrl=function(){n.getDataUrl.apply(n,[].slice.call(arguments))},i.loadCanvas=function(){n.loadCanvas.apply(n,[].slice.call(arguments))},i.loadImageFromUrl=function(){n.loadImageFromUrl.apply(n,[].slice.call(arguments))},i.loadSlider=function(){n.loadSlider.apply(n,[].slice.call(arguments))},i.move=function(){n.move.apply(n,[].slice.call(arguments))}});
//# sourceMappingURL=foo.umd.js.map