cropo/dist/foo.modern.js

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

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.imgHeight/this.canvasHeight)||this.baseScale:Math.min(this.imgWidth/this.originalWidth,this.imgHeight/this.originalHeight)||this.baseScale,this.slider&&(this.slider.value=String(this.scale))}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}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{originalWidth:this.img.naturalWidth,originalHeight:this.img.naturalHeight,imgWidth: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};
//# sourceMappingURL=foo.modern.js.map