cropo/dist/script.global.js

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

"use strict";var cropo=(()=>{var r=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var m=(n,t)=>{for(var i in t)r(n,i,{get:t[i],enumerable:!0})},c=(n,t,i,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!v.call(n,a)&&a!==i&&r(n,a,{get:()=>t[a],enumerable:!(e=o(t,a))||e.enumerable});return n};var l=n=>c(r({},"__esModule",{value:!0}),n);var W={};m(W,{Cropo:()=>h,download:()=>d,getCropInfo:()=>P,getDataUrl:()=>H,loadCanvas:()=>p,loadImageFromUrl:()=>u,loadSlider:()=>f,move:()=>b});var h=class{constructor(t){this.canvasWidth=0;this.canvasHeight=0;this.fit=!0;this.baseScale=1;this.maxScale=5;this.minScale=1;this.onResize=this.debounce(()=>{if(!this.img)return;let t=this.canvas.offsetWidth-this.canvasWidth,i=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+=t/2,this.netPanningY+=i/2,this.originalWidth=this.canvasWidth,this.originalHeight=this.canvasWidth*this.ratio,this.draw()),this.fixScale()},300);this.baseScale=t?.baseScale||this.baseScale,this.maxScale=t?.maxScale||this.maxScale,this.minScale=t?.minScale||this.minScale,this.loadCanvas(t?.canvas||document.createElement("canvas"),t?.width,t?.height),t?.rangeInput&&this.loadSlider(t.rangeInput),t?.imageUrl&&this.loadImageFromUrl(t?.imageUrl,t?.fit,()=>{this.move(t?.x||0,t?.y||0),t?.onImageLoad?.()})}clamp(t,i,e){return Math.max(i,Math.min(t,e))}debounce(t,i){let e;return(...a)=>{clearTimeout(e),e=setTimeout(()=>{t(...a)},i)}}initPointerAndZoom(){this.isDown=!1,this.netPanningX=0,this.netPanningY=0,this.eventCache=[],this.prevDiff=-1,this.slider&&(this.slider.value=String(this.baseScale))}draw(){this.img&&(this.canvasContext?.clearRect(0,0,this.canvasWidth,this.canvasHeight),this.canvasContext?.drawImage(this.img,this.netPanningX,this.netPanningY,this.imgWidth,this.imgHeight))}fixScale(){this.fit?this.scale=Math.min(this.imgWidth/this.canvasWidth,this.imgHeight/this.canvasHeight)||this.baseScale:this.scale=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 t=0,i=0;for(let e=0;e<this.eventCache.length;e++)t+=this.eventCache[e].offsetX,i+=this.eventCache[e].offsetY;return t=t/this.eventCache.length,i=i/this.eventCache.length,[t,i]}calcOrigin(t,i){this.originX=(-this.netPanningX+t)/this.imgWidth,this.originY=(-this.netPanningY+i)/this.imgHeight}move(t,i){let e=t-this.pointerX,a=i-this.pointerY;this.pointerX=t,this.pointerY=i,this.netPanningX=this.fit?this.clamp(this.netPanningX+e,this.canvasWidth-this.imgWidth,0):this.netPanningX+e,this.netPanningY=this.fit?this.clamp(this.netPanningY+a,this.canvasHeight-this.imgHeight,0):this.netPanningY+a}drawZoom(t,i){this.netPanningX=this.fit?this.clamp(this.netPanningX-t*this.originX,this.canvasWidth-this.imgWidth,0):this.netPanningX-t*this.originX,this.netPanningY=this.fit?this.clamp(this.netPanningY-i*this.originY,this.canvasHeight-this.imgHeight,0):this.netPanningY-i*this.originY}zoomDelta(t,i){let e=this.imgWidth+t;e<this.originalWidth||this.imgHeight+i<this.originalHeight||e/this.originalWidth>this.maxScale||e/this.originalWidth<this.minScale||(this.slider&&(this.slider.value=String(this.scale=e/this.originalWidth)),this.imgWidth=e,this.imgHeight+=i,this.drawZoom(t,i))}zoomScale(t){if(t>this.maxScale||t<this.minScale)return;this.prevDiff=-1;let i=this.imgWidth,e=this.imgHeight;this.imgWidth=this.originalWidth*t,this.imgHeight=this.originalHeight*t,i-=this.imgWidth,e-=this.imgHeight,this.calcOrigin(this.canvasWidth/2,this.canvasHeight/2),this.drawZoom(-i,-e)}pinch(){if(this.eventCache.length===2){let t=Math.hypot(this.eventCache[0].offsetX-this.eventCache[1].offsetX,this.eventCache[0].offsetY-this.eventCache[1].offsetY);if(this.prevDiff>0){let i=t-this.prevDiff;this.zoomDelta(i,i*this.ratio)}this.prevDiff=t}}onSliderMove(t){let i=t.target.value;this.scale=+i,this.zoomScale(this.scale),this.draw()}onPointerdown(t){this.img&&(this.eventCache.push(t),[this.pointerX,this.pointerY]=this.getPointerAverage(),this.isDown=!0)}onPointerUp(t){this.isDown&&(this.eventCache=this.eventCache.filter(i=>i.pointerId!==t.pointerId),this.eventCache.length<2&&(this.prevDiff=-1),[this.pointerX,this.pointerY]=this.getPointerAverage(),this.eventCache.length===0&&(this.isDown=!1))}onPointermove(t){if(!this.isDown)return;for(let a=0;a<this.eventCache.length;a++)if(t.pointerId===this.eventCache[a].pointerId){this.eventCache[a]=t;break}let[i,e]=this.getPointerAverage();this.move(i,e),this.pinch(),this.calcOrigin(this.canvasWidth/2,this.canvasHeight/2),this.draw()}prevent(t){t.preventDefault(),t.stopPropagation()}leadListeners(){this.canvas.addEventListener("pointerdown",t=>{this.prevent(t),this.onPointerdown(t)}),this.canvas.addEventListener("pointermove",t=>{this.prevent(t),this.onPointermove(t)}),this.canvas.addEventListener("pointerout",t=>{this.prevent(t),this.onPointerUp(t)}),this.canvas.addEventListener("pointerup",t=>{this.prevent(t),this.onPointerUp(t)}),this.canvas.addEventListener("pointercancel",t=>{this.prevent(t),this.onPointerUp(t)}),this.canvas.addEventListener("pointerleave",t=>{this.prevent(t),this.onPointerUp(t)}),new ResizeObserver(this.onResize).observe(this.canvas)}loadSlider(t){this.slider=t,this.slider.value=String(this.scale||this.baseScale),this.slider.addEventListener("input",i=>{this.prevent(i),this.onSliderMove(i)})}loadCanvas(t,i,e){this.canvas=t;let a=this.canvas.getContext("2d");if(!a)throw Error("could not get a 2d canvas context");this.canvasContext=a,this.canvasWidth=this.canvas.width=i||this.canvas.offsetWidth,this.canvasHeight=this.canvas.height=e||this.canvas.offsetHeight,this.leadListeners()}loadImageFromUrl(t,i=!0,e){if(!this.canvas)throw Error("first call loadCanvas");this.fit=i,this.img=new Image,this.img.onload=()=>{this.initPointerAndZoom(),this.imgHeight=this.img.naturalHeight,this.imgWidth=this.img.naturalWidth,this.onImageLoad(),e?.()},this.img.src=t}getCanvas(t){if(!this.img)throw Error("please set an image");let i=document.createElement("canvas");i.width=this.canvasWidth*t,i.height=this.canvasHeight*t;let e=i.getContext("2d");if(!e)throw Error("could not get a 2d canvas context");return e.drawImage(this.img,this.netPanningX*t,this.netPanningY*t,this.imgWidth*t,this.imgHeight*t),i}getBlob(t=1){return new Promise((i,e)=>{this.getCanvas(t).toBlob(a=>{a?i(a):e(Error("could not create blob from canvas"))})})}getDataUrl(t=1){return this.getCanvas(t).toDataURL()}download(t=1){let i=document.createElement("a");i.download="canvas.png",i.href=this.getDataUrl(t),i.click()}getCropInfo(){return{originalWidth:this.img.naturalWidth,originalHeight:this.img.naturalHeight,imgWidth:this.imgWidth,imgHeight:this.imgHeight,x:this.netPanningX,y:this.netPanningY}}},s=new h({});function d(...n){s.download(...n)}function p(...n){s.loadCanvas(...n)}function u(...n){s.loadImageFromUrl(...n)}function f(...n){s.loadSlider(...n)}function b(...n){s.move(...n)}function P(...n){s.getCropInfo(...n)}function H(...n){s.getDataUrl(...n)}return l(W);})();
//# sourceMappingURL=script.global.js.map