cropo - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

dist/foo.js

@@ -1,2 +0,2 @@
-var t,n,e,o,i,r,a,f,u,c,d,l,s,v,h,g,p,m,w,x=0,E=0;function I(){var t,n;null==(t=e)||t.clearRect(0,0,x,E),null==(n=e)||n.drawImage(o,v,h,r,i)}function L(t){a=Math.max(E/i,x/r),c=(u=i*=a)/(f=r*=a),I()}function b(t,n,e){return Math.max(n,Math.min(t,e))}function C(){for(var t=0,n=0,e=0;e<m.length;e++)t+=m[e].offsetX,n+=m[e].offsetY;return[t/=m.length,n/=m.length]}function H(t,n){g=(-v+t)/r,p=(-h+n)/i}function M(t,n){v=b(v-t*g,x-r,0),h=b(h-n*p,E-i,0)}function S(t){(m=m.filter(function(n){return n.pointerId!=t.pointerId})).length<2&&(w=-1);var n=C();l=n[0],s=n[1],0==m.length&&(d=!1)}var W,y,D=(W=function(){var e=n.offsetWidth-x,o=n.offsetHeight-E;x=n.width=n.offsetWidth,E=n.height=n.offsetHeight,r<x?(v=0,L()):i<E?(h=0,L()):(v+=e/2,h+=o/2,f=x,u=x*c,I()),t.value=String(a=Math.min(r/x,r/E)||1)},function(){var t=arguments;clearTimeout(y),y=setTimeout(function(){W.apply(void 0,[].slice.call(t))},300)});function R(t){t.preventDefault(),t.stopPropagation()}function U(){var t=document.createElement("canvas");return t.width=x,t.height=E,t.getContext("2d").drawImage(o,v,h,r,i),t.toDataURL()}exports.download=function(){var t=document.createElement("a");t.download="canvas.png",t.href=U(),t.click()},exports.getBlob=function(){return new Promise(function(t,n){var e=document.createElement("canvas");e.width=x,e.height=E,e.getContext("2d").drawImage(o,v,h,r,i),e.toBlob(function(n){t(n)})})},exports.getCropInfo=function(){return{width:r,imgHeight:i,x:v,y:h}},exports.getDataUrl=U,exports.loadCanvas=function(o){e=(n=o).getContext("2d"),x=n.width=n.offsetWidth,E=n.height=n.offsetHeight,n.addEventListener("pointerdown",function(t){R(t),function(t){m.push(t);var n=C();l=n[0],s=n[1],d=!0}(t)}),n.addEventListener("pointermove",function(n){R(n),function(n){for(var e=0;e<m.length;e++)if(n.pointerId==m[e].pointerId){m[e]=n;break}var o,g,p,L,S=C();d&&(p=(o=S[0])-l,L=(g=S[1])-s,l=o,s=g,v=b(v+p,x-r,0),h=b(h+L,E-i,0)),function(){if(2==m.length){var n=Math.hypot(m[0].offsetX-m[1].offsetX,m[0].offsetY-m[1].offsetY);if(w>0){var e=n-w;d=e*c,(l=r+(o=e))<f||i+d<u||l/f>5||(t&&(t.value=String(a=l/f)),r=l,i+=d,M(o,d))}w=n}var o,d,l}(),H(x/2,E/2),I()}(n)}),n.addEventListener("pointerout",function(t){R(t),S(t)}),n.addEventListener("pointerup",function(t){R(t),S(t)}),n.addEventListener("pointercancel",function(t){R(t),S(t)}),n.addEventListener("pointerleave",function(t){R(t),S(t)}),new ResizeObserver(D).observe(n)},exports.loadImageFromUrl=function(n){(o=new Image).onload=function(){d=!1,v=0,h=0,m=[],w=-1,t&&(t.value="1"),i=o.naturalHeight,r=o.naturalWidth,L()},o.src=n},exports.loadSlider=function(n){(t=n).value=String(o&&a||1),t.addEventListener("input",function(t){R(t),function(t){(function(t){w=-1;var n=r,e=i;n-=r=f*t,e-=i=u*t,H(x/2,E/2),M(-n,-e)})(a=+t.target.value),I()}(t)})};
+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(){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;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){this.eventCache.push(i);var t=this.getPointerAverage();this.pointerX=t[0],this.pointerY=t[1],this.isDown=!0},t.onPointerUp=function(i){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){void 0===i&&(i=1);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(){var i;(i=t.download).call.apply(i,[t].concat([].slice.call(arguments)))},exports.getCropInfo=function(){var i;(i=t.getCropInfo).call.apply(i,[t].concat([].slice.call(arguments)))},exports.getDataUrl=function(){var i;(i=t.getDataUrl).call.apply(i,[t].concat([].slice.call(arguments)))},exports.loadCanvas=function(){var i;(i=t.loadCanvas).call.apply(i,[t].concat([].slice.call(arguments)))},exports.loadImageFromUrl=function(){var i;(i=t.loadImageFromUrl).call.apply(i,[t].concat([].slice.call(arguments)))},exports.loadSlider=function(){var i;(i=t.loadSlider).call.apply(i,[t].concat([].slice.call(arguments)))},exports.move=function(){var i;(i=t.move).call.apply(i,[t].concat([].slice.call(arguments)))};
 //# sourceMappingURL=foo.js.map

dist/foo.modern.js

@@ -1,2 +0,2 @@
-var t,e,n,o,i,r,a,f,u,c,d,h,l,s,g,v=0,m=0;let p,w;var E,I;function L(){var t,e;null==(t=n)||t.clearRect(0,0,v,m),null==(e=n)||e.drawImage(o,s,g,r,i)}function x(t=!0){a=Math.max(m/i,v/r),c=(u=i*=a)/(f=r*=a),L()}function H(t,e,n){return Math.max(e,Math.min(t,n))}function M(){let t=0,e=0;for(var n=0;n<E.length;n++)t+=E[n].offsetX,e+=E[n].offsetY;return t/=E.length,e/=E.length,[t,e]}function b(t,e){p=(-s+t)/r,w=(-g+e)/i}function W(t,e){s=H(s-t*p,v-r,0),g=H(g-e*w,m-i,0)}function C(t){(E=E.filter(e=>e.pointerId!=t.pointerId)).length<2&&(I=-1),[h,l]=M(),0==E.length&&(d=!1)}const R=function(n,o){let d;return(...n)=>{clearTimeout(d),d=setTimeout(()=>{(()=>{const n=e.offsetWidth-v,o=e.offsetHeight-m;v=e.width=e.offsetWidth,m=e.height=e.offsetHeight,r<v?(s=0,x()):i<m?(g=0,x()):(s+=n/2,g+=o/2,f=v,u=v*c,L()),t.value=String(a=Math.min(r/v,r/m)||1)})(...n)},300)}}();function S(t){t.preventDefault(),t.stopPropagation()}function X(e){(t=e).value=String(o&&a||1),t.addEventListener("input",t=>{S(t),function(t){(function(t){I=-1;let e=r,n=i;e-=r=f*t,n-=i=u*t,b(v/2,m/2),W(-e,-n)})(a=+t.target.value),L()}(t)})}function Y(o){n=(e=o).getContext("2d"),v=e.width=e.offsetWidth,m=e.height=e.offsetHeight,e.addEventListener("pointerdown",t=>{S(t),function(t){E.push(t),[h,l]=M(),d=!0}(t)}),e.addEventListener("pointermove",e=>{S(e),function(e){for(var n=0;n<E.length;n++)if(e.pointerId==E[n].pointerId){E[n]=e;break}let[o,p]=M();d&&function(t,e){var n=t-h,o=e-l;h=t,l=e,s=H(s+n,v-r,0),g=H(g+o,m-i,0)}(o,p),function(){if(2==E.length){var e=Math.hypot(E[0].offsetX-E[1].offsetX,E[0].offsetY-E[1].offsetY);if(I>0){const n=e-I;!function(e,n){const o=r+e;o<f||i+n<u||o/f>5||(t&&(t.value=String(a=o/f)),r=o,i+=n,W(e,n))}(n,n*c)}I=e}}(),b(v/2,m/2),L()}(e)}),e.addEventListener("pointerout",t=>{S(t),C(t)}),e.addEventListener("pointerup",t=>{S(t),C(t)}),e.addEventListener("pointercancel",t=>{S(t),C(t)}),e.addEventListener("pointerleave",t=>{S(t),C(t)}),new ResizeObserver(R).observe(e)}function k(e){(o=new Image).onload=()=>{d=!1,s=0,g=0,E=[],I=-1,t&&(t.value="1"),i=o.naturalHeight,r=o.naturalWidth,x()},o.src=e}function y(){return new Promise((t,e)=>{var n=document.createElement("canvas");n.width=v,n.height=m,n.getContext("2d").drawImage(o,s,g,r,i),n.toBlob(e=>{t(e)})})}function D(){var t=document.createElement("canvas");return t.width=v,t.height=m,t.getContext("2d").drawImage(o,s,g,r,i),t.toDataURL()}function P(){const t=document.createElement("a");t.download="canvas.png",t.href=D(),t.click()}function T(){return{width:r,imgHeight:i,x:s,y:g}}export{P as download,y as getBlob,T as getCropInfo,D as getDataUrl,Y as loadCanvas,k as loadImageFromUrl,X as loadSlider};
+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(()=>{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;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(var 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){var 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){var 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.eventCache.push(i),[this.pointerX,this.pointerY]=this.getPointerAverage(),this.isDown=!0}onPointerUp(i){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(var t=0;t<this.eventCache.length;t++)if(i.pointerId==this.eventCache[t].pointerId){this.eventCache[t]=i;break}let[h,s]=this.getPointerAverage();this.move(h,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,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){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()}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.call(t,...i)}function s(...i){t.loadCanvas.call(t,...i)}function e(...i){t.loadImageFromUrl.call(t,...i)}function n(...i){t.loadSlider.call(t,...i)}function a(...i){t.move.call(t,...i)}function o(...i){t.getCropInfo.call(t,...i)}function g(...i){t.getDataUrl.call(t,...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};
 //# sourceMappingURL=foo.modern.js.map

dist/foo.module.js

@@ -1,2 +0,2 @@
-var t,n,e,i,o,r,a,f,u,c,d,v,h,l,s,g,p,m,w,E=0,I=0;function L(){var t,n;null==(t=e)||t.clearRect(0,0,E,I),null==(n=e)||n.drawImage(i,l,s,r,o)}function x(t){a=Math.max(I/o,E/r),c=(u=o*=a)/(f=r*=a),L()}function H(t,n,e){return Math.max(n,Math.min(t,e))}function M(){for(var t=0,n=0,e=0;e<m.length;e++)t+=m[e].offsetX,n+=m[e].offsetY;return[t/=m.length,n/=m.length]}function b(t,n){g=(-l+t)/r,p=(-s+n)/o}function W(t,n){l=H(l-t*g,E-r,0),s=H(s-n*p,I-o,0)}function y(t){(m=m.filter(function(n){return n.pointerId!=t.pointerId})).length<2&&(w=-1);var n=M();v=n[0],h=n[1],0==m.length&&(d=!1)}var C,R,S=(C=function(){var e=n.offsetWidth-E,i=n.offsetHeight-I;E=n.width=n.offsetWidth,I=n.height=n.offsetHeight,r<E?(l=0,x()):o<I?(s=0,x()):(l+=e/2,s+=i/2,f=E,u=E*c,L()),t.value=String(a=Math.min(r/E,r/I)||1)},function(){var t=arguments;clearTimeout(R),R=setTimeout(function(){C.apply(void 0,[].slice.call(t))},300)});function X(t){t.preventDefault(),t.stopPropagation()}function Y(n){(t=n).value=String(i&&a||1),t.addEventListener("input",function(t){X(t),function(t){(function(t){w=-1;var n=r,e=o;n-=r=f*t,e-=o=u*t,b(E/2,I/2),W(-n,-e)})(a=+t.target.value),L()}(t)})}function k(i){e=(n=i).getContext("2d"),E=n.width=n.offsetWidth,I=n.height=n.offsetHeight,n.addEventListener("pointerdown",function(t){X(t),function(t){m.push(t);var n=M();v=n[0],h=n[1],d=!0}(t)}),n.addEventListener("pointermove",function(n){X(n),function(n){for(var e=0;e<m.length;e++)if(n.pointerId==m[e].pointerId){m[e]=n;break}var i,g,p,x,y=M();d&&(p=(i=y[0])-v,x=(g=y[1])-h,v=i,h=g,l=H(l+p,E-r,0),s=H(s+x,I-o,0)),function(){if(2==m.length){var n=Math.hypot(m[0].offsetX-m[1].offsetX,m[0].offsetY-m[1].offsetY);if(w>0){var e=n-w;d=e*c,(v=r+(i=e))<f||o+d<u||v/f>5||(t&&(t.value=String(a=v/f)),r=v,o+=d,W(i,d))}w=n}var i,d,v}(),b(E/2,I/2),L()}(n)}),n.addEventListener("pointerout",function(t){X(t),y(t)}),n.addEventListener("pointerup",function(t){X(t),y(t)}),n.addEventListener("pointercancel",function(t){X(t),y(t)}),n.addEventListener("pointerleave",function(t){X(t),y(t)}),new ResizeObserver(S).observe(n)}function D(n){(i=new Image).onload=function(){d=!1,l=0,s=0,m=[],w=-1,t&&(t.value="1"),o=i.naturalHeight,r=i.naturalWidth,x()},i.src=n}function P(){return new Promise(function(t,n){var e=document.createElement("canvas");e.width=E,e.height=I,e.getContext("2d").drawImage(i,l,s,r,o),e.toBlob(function(n){t(n)})})}function T(){var t=document.createElement("canvas");return t.width=E,t.height=I,t.getContext("2d").drawImage(i,l,s,r,o),t.toDataURL()}function z(){var t=document.createElement("a");t.download="canvas.png",t.href=T(),t.click()}function B(){return{width:r,imgHeight:o,x:l,y:s}}export{z as download,P as getBlob,B as getCropInfo,T as getDataUrl,k as loadCanvas,D as loadImageFromUrl,Y as loadSlider};
+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(){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;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){this.eventCache.push(i);var t=this.getPointerAverage();this.pointerX=t[0],this.pointerY=t[1],this.isDown=!0},t.onPointerUp=function(i){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){void 0===i&&(i=1);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(){var i;(i=t.download).call.apply(i,[t].concat([].slice.call(arguments)))}function e(){var i;(i=t.loadCanvas).call.apply(i,[t].concat([].slice.call(arguments)))}function a(){var i;(i=t.loadImageFromUrl).call.apply(i,[t].concat([].slice.call(arguments)))}function h(){var i;(i=t.loadSlider).call.apply(i,[t].concat([].slice.call(arguments)))}function s(){var i;(i=t.move).call.apply(i,[t].concat([].slice.call(arguments)))}function o(){var i;(i=t.getCropInfo).call.apply(i,[t].concat([].slice.call(arguments)))}function c(){var i;(i=t.getDataUrl).call.apply(i,[t].concat([].slice.call(arguments)))}export{i as Cropo,n as download,o as getCropInfo,c as getDataUrl,e as loadCanvas,a as loadImageFromUrl,h as loadSlider,s as move};
 //# sourceMappingURL=foo.module.js.map

dist/foo.umd.js

@@ -1,2 +0,2 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t||self).cropo={})}(this,function(t){var n,e,o,i,a,r,f,u,c,d,l,h,s,v,g,p,m,w,E,I=0,x=0;function b(){var t,n;null==(t=o)||t.clearRect(0,0,I,x),null==(n=o)||n.drawImage(i,v,g,r,a)}function L(t){f=Math.max(x/a,I/r),d=(c=a*=f)/(u=r*=f),b()}function y(t,n,e){return Math.max(n,Math.min(t,e))}function C(){for(var t=0,n=0,e=0;e<w.length;e++)t+=w[e].offsetX,n+=w[e].offsetY;return[t/=w.length,n/=w.length]}function H(t,n){p=(-v+t)/r,m=(-g+n)/a}function M(t,n){v=y(v-t*p,I-r,0),g=y(g-n*m,x-a,0)}function S(t){(w=w.filter(function(n){return n.pointerId!=t.pointerId})).length<2&&(E=-1);var n=C();h=n[0],s=n[1],0==w.length&&(l=!1)}var T,W,D=(T=function(){var t=e.offsetWidth-I,o=e.offsetHeight-x;I=e.width=e.offsetWidth,x=e.height=e.offsetHeight,r<I?(v=0,L()):a<x?(g=0,L()):(v+=t/2,g+=o/2,u=I,c=I*d,b()),n.value=String(f=Math.min(r/I,r/x)||1)},function(){var t=arguments;clearTimeout(W),W=setTimeout(function(){T.apply(void 0,[].slice.call(t))},300)});function R(t){t.preventDefault(),t.stopPropagation()}function U(){var t=document.createElement("canvas");return t.width=I,t.height=x,t.getContext("2d").drawImage(i,v,g,r,a),t.toDataURL()}t.download=function(){var t=document.createElement("a");t.download="canvas.png",t.href=U(),t.click()},t.getBlob=function(){return new Promise(function(t,n){var e=document.createElement("canvas");e.width=I,e.height=x,e.getContext("2d").drawImage(i,v,g,r,a),e.toBlob(function(n){t(n)})})},t.getCropInfo=function(){return{width:r,imgHeight:a,x:v,y:g}},t.getDataUrl=U,t.loadCanvas=function(t){o=(e=t).getContext("2d"),I=e.width=e.offsetWidth,x=e.height=e.offsetHeight,e.addEventListener("pointerdown",function(t){R(t),function(t){w.push(t);var n=C();h=n[0],s=n[1],l=!0}(t)}),e.addEventListener("pointermove",function(t){R(t),function(t){for(var e=0;e<w.length;e++)if(t.pointerId==w[e].pointerId){w[e]=t;break}var o,i,p,m,L=C();l&&(p=(o=L[0])-h,m=(i=L[1])-s,h=o,s=i,v=y(v+p,I-r,0),g=y(g+m,x-a,0)),function(){if(2==w.length){var t=Math.hypot(w[0].offsetX-w[1].offsetX,w[0].offsetY-w[1].offsetY);if(E>0){var e=t-E;i=e*d,(l=r+(o=e))<u||a+i<c||l/u>5||(n&&(n.value=String(f=l/u)),r=l,a+=i,M(o,i))}E=t}var o,i,l}(),H(I/2,x/2),b()}(t)}),e.addEventListener("pointerout",function(t){R(t),S(t)}),e.addEventListener("pointerup",function(t){R(t),S(t)}),e.addEventListener("pointercancel",function(t){R(t),S(t)}),e.addEventListener("pointerleave",function(t){R(t),S(t)}),new ResizeObserver(D).observe(e)},t.loadImageFromUrl=function(t){(i=new Image).onload=function(){l=!1,v=0,g=0,w=[],E=-1,n&&(n.value="1"),a=i.naturalHeight,r=i.naturalWidth,L()},i.src=t},t.loadSlider=function(t){(n=t).value=String(i&&f||1),n.addEventListener("input",function(t){R(t),function(t){(function(t){E=-1;var n=r,e=a;n-=r=u*t,e-=a=c*t,H(I/2,x/2),M(-n,-e)})(f=+t.target.value),b()}(t)})}});
+!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(){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;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){this.eventCache.push(i);var t=this.getPointerAverage();this.pointerX=t[0],this.pointerY=t[1],this.isDown=!0},t.onPointerUp=function(i){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){void 0===i&&(i=1);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(){var i;(i=n.download).call.apply(i,[n].concat([].slice.call(arguments)))},i.getCropInfo=function(){var i;(i=n.getCropInfo).call.apply(i,[n].concat([].slice.call(arguments)))},i.getDataUrl=function(){var i;(i=n.getDataUrl).call.apply(i,[n].concat([].slice.call(arguments)))},i.loadCanvas=function(){var i;(i=n.loadCanvas).call.apply(i,[n].concat([].slice.call(arguments)))},i.loadImageFromUrl=function(){var i;(i=n.loadImageFromUrl).call.apply(i,[n].concat([].slice.call(arguments)))},i.loadSlider=function(){var i;(i=n.loadSlider).call.apply(i,[n].concat([].slice.call(arguments)))},i.move=function(){var i;(i=n.move).call.apply(i,[n].concat([].slice.call(arguments)))}});
 //# sourceMappingURL=foo.umd.js.map

dist/script.d.ts

@@ -1,12 +0,102 @@
-export declare function loadSlider(el: HTMLInputElement): void;
-export declare function loadCanvas(el: HTMLCanvasElement): void;
-export declare function loadImageFromUrl(url: string): void;
-export declare function getBlob(): Promise<Blob>;
-export declare function getDataUrl(): string;
-export declare function download(): void;
-export declare function getCropInfo(): {
-    width: number;
-    imgHeight: number;
-    x: number;
-    y: number;
-};
+export declare class Cropo {
+    private slider;
+    private canvas;
+    private canvasContext;
+    private canvasWidth;
+    private canvasHeight;
+    private fit;
+    private img;
+    private imgHeight;
+    private imgWidth;
+    private scale;
+    private baseScale;
+    private maxScale;
+    private minScale;
+    private originalWidth;
+    private originalHeight;
+    private ratio;
+    private isDown;
+    private pointerX;
+    private pointerY;
+    private netPanningX;
+    private netPanningY;
+    private originX;
+    private originY;
+    private eventCache;
+    private prevDiff;
+    constructor(options: {
+        imageUrl?: string;
+        onImageLoad?: () => void;
+        canvas?: HTMLCanvasElement;
+        rangeInput?: HTMLInputElement;
+        height?: number;
+        width?: number;
+        x?: number;
+        y?: number;
+        fit?: boolean;
+        baseScale?: number;
+        maxScale?: number;
+        minScale?: number;
+    });
+    private clamp;
+    private debounce;
+    private initPointerAndZoom;
+    private draw;
+    private fixScale;
+    private onImageLoad;
+    private getPointerAverage;
+    private calcOrigin;
+    move(x: number, y: number): void;
+    private drawZoom;
+    private zoomDelta;
+    private zoomScale;
+    private pinch;
+    private onSliderMove;
+    private onPointerdown;
+    private onPointerUp;
+    private onPointermove;
+    private onResize;
+    private prevent;
+    private leadListeners;
+    loadSlider(el: HTMLInputElement): void;
+    loadCanvas(el: HTMLCanvasElement, width?: number, height?: number): void;
+    loadImageFromUrl(url: string, fitImage?: boolean, onload?: () => void): void;
+    getDataUrl(scale?: number): string;
+    download(scale?: number): void;
+    getCropInfo(): {
+        width: number;
+        imgHeight: number;
+        x: number;
+        y: number;
+    };
+}
+declare const cr: Cropo;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: cont cr= new Cropo(config); cr.download();)
+ */
+export declare function download(...arg: Parameters<typeof cr.download>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: new Cropo(config))
+ */
+export declare function loadCanvas(...arg: Parameters<typeof cr.loadCanvas>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: cont cr= new Cropo(config); cr.loadImageFromUrl();)
+ */
+export declare function loadImageFromUrl(...arg: Parameters<typeof cr.loadImageFromUrl>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: new Cropo(config))
+ */
+export declare function loadSlider(...arg: Parameters<typeof cr.loadSlider>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: cont cr= new Cropo(config); cr.move();)
+ */
+export declare function move(...arg: Parameters<typeof cr.move>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead.(example: cont cr= new Cropo(config); cr.getCropInfo();)
+ */
+export declare function getCropInfo(...arg: Parameters<typeof cr.getCropInfo>): void;
+/**
+ * @deprecated Since version 0.6. Will be deleted in version 1.0. Use Cropo instance instead. (example: cont cr= new Cropo(config); cr.getDataUrl();)
+ */
+export declare function getDataUrl(...arg: Parameters<typeof cr.getDataUrl>): void;
+export {};

package.json

 {
   "name": "cropo",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "scripts": {
@@ -5,0 +5,0 @@ "watch": "parcel watch",

README.md

@@ -5,2 +5,4 @@ # cropo
 
+[code Example on codepen](https://codepen.io/mh_alijnay/pen/MWvErzV)
+
 ## Table of Contents
@@ -38,3 +40,3 @@
 ```js
-import cr from 'cropo';
+import { Cropo } from 'cropo';
 ```
@@ -45,3 +47,3 @@
 ```js
-const cr = require('cropo');
+const { Cropo } = require('cropo');
 ```
@@ -52,6 +54,7 @@
 ```js
-// load html canvas element
-cr.loadCanvas(document.getElementById('canvas'));
-// load image
-cr.loadImageFromUrl('https://loacl/landscape/3.jpg');
+const cropo = new Cropo({
+    imageUrl: image,
+    canvas: document.getElementById('canvas'),
+    rangeInput: document.getElementById('inputRange')
+})
 ```
@@ -62,15 +65,6 @@
 ```js
-// select an input to control zoom level
-cr.loadSlider(document.getElementById("myRange"))
-```
-
-input range most be between 1 and 5
-
-### 4 - Download or upload image
-
-```js
 // download canvas image
-cr.download();
+cropo.download();
 // get image as data url
-cr.getDataUrl();
+cropo.getDataUrl();
 ```
@@ -77,0 +71,0 @@

New alerts

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

129921

increased by80.24%

Lines of code

232

increased by280.33%

Worsened metrics

Number of lines in readme file

75

decreased by-7.41%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes