cropo - npm Package Compare versions

Comparing version 0.5.6 to 0.5.7

dist/foo.js

@@ -1,2 +0,2 @@
-var i=/*#__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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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.getDataUrl=function(i){if(void 0===i&&(i=1),!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.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{width:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}},i}(),t=new i({});exports.Cropo=i,exports.download=function(){t.download.apply(t,[].slice.call(arguments))},exports.getCropInfo=function(){t.getCropInfo.apply(t,[].slice.call(arguments))},exports.getDataUrl=function(){t.getDataUrl.apply(t,[].slice.call(arguments))},exports.loadCanvas=function(){t.loadCanvas.apply(t,[].slice.call(arguments))},exports.loadImageFromUrl=function(){t.loadImageFromUrl.apply(t,[].slice.call(arguments))},exports.loadSlider=function(){t.loadSlider.apply(t,[].slice.call(arguments))},exports.move=function(){t.move.apply(t,[].slice.call(arguments))};
+var i=/*#__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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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{width:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}},i}(),t=new i({});exports.Cropo=i,exports.download=function(){t.download.apply(t,[].slice.call(arguments))},exports.getCropInfo=function(){t.getCropInfo.apply(t,[].slice.call(arguments))},exports.getDataUrl=function(){t.getDataUrl.apply(t,[].slice.call(arguments))},exports.loadCanvas=function(){t.loadCanvas.apply(t,[].slice.call(arguments))},exports.loadImageFromUrl=function(){t.loadImageFromUrl.apply(t,[].slice.call(arguments))},exports.loadSlider=function(){t.loadSlider.apply(t,[].slice.call(arguments))},exports.move=function(){t.move.apply(t,[].slice.call(arguments))};
 //# sourceMappingURL=foo.js.map

dist/foo.modern.js

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

dist/foo.module.js

@@ -1,2 +0,2 @@
-var i=/*#__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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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.getDataUrl=function(i){if(void 0===i&&(i=1),!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.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{width:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}},i}(),t=new i({});function n(){t.download.apply(t,[].slice.call(arguments))}function e(){t.loadCanvas.apply(t,[].slice.call(arguments))}function h(){t.loadImageFromUrl.apply(t,[].slice.call(arguments))}function s(){t.loadSlider.apply(t,[].slice.call(arguments))}function a(){t.move.apply(t,[].slice.call(arguments))}function o(){t.getCropInfo.apply(t,[].slice.call(arguments))}function r(){t.getDataUrl.apply(t,[].slice.call(arguments))}export{i as Cropo,n as download,o as getCropInfo,r as getDataUrl,e as loadCanvas,h as loadImageFromUrl,s as loadSlider,a as move};
+var i=/*#__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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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{width:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}},i}(),t=new i({});function n(){t.download.apply(t,[].slice.call(arguments))}function e(){t.loadCanvas.apply(t,[].slice.call(arguments))}function h(){t.loadImageFromUrl.apply(t,[].slice.call(arguments))}function s(){t.loadSlider.apply(t,[].slice.call(arguments))}function a(){t.move.apply(t,[].slice.call(arguments))}function o(){t.getCropInfo.apply(t,[].slice.call(arguments))}function r(){t.getDataUrl.apply(t,[].slice.call(arguments))}export{i as Cropo,n as download,o as getCropInfo,r as getDataUrl,e as loadCanvas,h as loadImageFromUrl,s as loadSlider,a as move};
 //# sourceMappingURL=foo.module.js.map

dist/foo.umd.js

@@ -1,2 +0,2 @@
-!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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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.getDataUrl=function(i){if(void 0===i&&(i=1),!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.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{width: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))}});
+!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.imgWidth/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgWidth/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{width: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

dist/script.d.ts

@@ -64,2 +64,4 @@ export declare class Cropo {
     loadImageFromUrl(url: string, fitImage?: boolean, onload?: () => void): void;
+    private getCanvas;
+    getBlob(scale?: number): Promise<Blob>;
     getDataUrl(scale?: number): string;
@@ -66,0 +68,0 @@ download(scale?: number): void;

package.json

 {
   "name": "cropo",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "scripts": {
@@ -5,0 +5,0 @@ "build": "microbundle"

README.md

@@ -0,0 +0,0 @@ # cropo

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133137

increased by1.85%

Lines of code

235

increased by1.73%

No dependency changes