react-image-crop
Version:
A responsive image cropping tool for React
1 lines • 16.3 kB
JavaScript
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactCrop={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var l={x:0,y:0,width:0,height:0,unit:`px`},u=(e,t,n)=>Math.min(Math.max(e,t),n),d=(...e)=>e.filter(e=>e&&typeof e==`string`).join(` `),f=(e,t)=>e===t||e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit;function p(e,t,n,r){let i=g(e,n,r);return e.width&&(i.height=i.width/t),e.height&&(i.width=i.height*t),i.y+i.height>r&&(i.height=r-i.y,i.width=i.height*t),i.x+i.width>n&&(i.width=n-i.x,i.height=i.width/t),e.unit===`%`?h(i,n,r):i}function m(e,t,n){let r=g(e,t,n);return r.x=(t-r.width)/2,r.y=(n-r.height)/2,e.unit===`%`?h(r,t,n):r}function h(e,t,n){return e.unit===`%`?{...l,...e,unit:`%`}:{unit:`%`,x:e.x?e.x/t*100:0,y:e.y?e.y/n*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/n*100:0}}function g(e,t,n){return!e.unit||e.unit===`px`?{...l,...e,unit:`px`}:{unit:`px`,x:e.x?e.x*t/100:0,y:e.y?e.y*n/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*n/100:0}}function _(e,t,n,r,i,a=0,o=0,s=r,c=i){let l={...e},u=Math.min(a,r),d=Math.min(o,i),f=Math.min(s,r),p=Math.min(c,i);t&&(t>1?(u=o?o*t:u,d=u/t,f=s*t):(d=a?a/t:d,u=d*t,p=c/t)),l.y<0&&(l.height=Math.max(l.height+l.y,d),l.y=0),l.x<0&&(l.width=Math.max(l.width+l.x,u),l.x=0);let m=r-(l.x+l.width);m<0&&(l.x=Math.min(l.x,r-u),l.width+=m);let h=i-(l.y+l.height);if(h<0&&(l.y=Math.min(l.y,i-d),l.height+=h),l.width<u&&((n===`sw`||n==`nw`)&&(l.x-=u-l.width),l.width=u),l.height<d&&((n===`nw`||n==`ne`)&&(l.y-=d-l.height),l.height=d),l.width>f&&((n===`sw`||n==`nw`)&&(l.x-=f-l.width),l.width=f),l.height>p&&((n===`nw`||n==`ne`)&&(l.y-=p-l.height),l.height=p),t){let e=l.width/l.height;if(e<t){let e=Math.max(l.width/t,d);(n===`nw`||n==`ne`)&&(l.y-=e-l.height),l.height=e}else if(e>t){let e=Math.max(l.height*t,u);(n===`sw`||n==`nw`)&&(l.x-=e-l.width),l.width=e}}return l}function v(e,t,n,r){let i={...e};return t===`ArrowLeft`?r===`nw`?(i.x-=n,i.y-=n,i.width+=n,i.height+=n):r===`w`?(i.x-=n,i.width+=n):r===`sw`?(i.x-=n,i.width+=n,i.height+=n):r===`ne`?(i.y+=n,i.width-=n,i.height-=n):r===`e`?i.width-=n:r===`se`&&(i.width-=n,i.height-=n):t===`ArrowRight`&&(r===`nw`?(i.x+=n,i.y+=n,i.width-=n,i.height-=n):r===`w`?(i.x+=n,i.width-=n):r===`sw`?(i.x+=n,i.width-=n,i.height-=n):r===`ne`?(i.y-=n,i.width+=n,i.height+=n):r===`e`?i.width+=n:r===`se`&&(i.width+=n,i.height+=n)),t===`ArrowUp`?r===`nw`?(i.x-=n,i.y-=n,i.width+=n,i.height+=n):r===`n`?(i.y-=n,i.height+=n):r===`ne`?(i.y-=n,i.width+=n,i.height+=n):r===`sw`?(i.x+=n,i.width-=n,i.height-=n):r===`s`?i.height-=n:r===`se`&&(i.width-=n,i.height-=n):t===`ArrowDown`&&(r===`nw`?(i.x+=n,i.y+=n,i.width-=n,i.height-=n):r===`n`?(i.y+=n,i.height-=n):r===`ne`?(i.y+=n,i.width-=n,i.height-=n):r===`sw`?(i.x-=n,i.width+=n,i.height+=n):r===`s`?i.height+=n:r===`se`&&(i.width+=n,i.height+=n)),i}var y={capture:!0,passive:!1},b=0,x=class e extends t.PureComponent{static xOrds=[`e`,`w`];static yOrds=[`n`,`s`];static xyOrds=[`nw`,`ne`,`se`,`sw`];static nudgeStep=1;static nudgeStepMedium=10;static nudgeStepLarge=100;static defaultProps={ariaLabels:{cropArea:`Use the arrow keys to move the crop selection area`,nwDragHandle:`Use the arrow keys to move the north west drag handle to change the crop selection area`,nDragHandle:`Use the up and down arrow keys to move the north drag handle to change the crop selection area`,neDragHandle:`Use the arrow keys to move the north east drag handle to change the crop selection area`,eDragHandle:`Use the up and down arrow keys to move the east drag handle to change the crop selection area`,seDragHandle:`Use the arrow keys to move the south east drag handle to change the crop selection area`,sDragHandle:`Use the up and down arrow keys to move the south drag handle to change the crop selection area`,swDragHandle:`Use the arrow keys to move the south west drag handle to change the crop selection area`,wDragHandle:`Use the up and down arrow keys to move the west drag handle to change the crop selection area`}};get document(){return document}docMoveBound=!1;mouseDownOnCrop=!1;dragStarted=!1;evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0};componentRef=(0,t.createRef)();mediaRef=(0,t.createRef)();resizeObserver;initChangeCalled=!1;instanceId=`rc-${b++}`;state={cropIsActive:!1,newCropIsBeingDrawn:!1};getBox(){let e=this.mediaRef.current;if(!e)return{x:0,y:0,width:0,height:0};let{x:t,y:n,width:r,height:i}=e.getBoundingClientRect();return{x:t,y:n,width:r,height:i}}componentDidUpdate(e){let{crop:t,onComplete:n}=this.props;if(n&&!e.crop&&t){let{width:e,height:r}=this.getBox();e&&r&&n(g(t,e,r),h(t,e,r))}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect(),this.unbindDocMove()}bindDocMove(){this.docMoveBound||=(this.document.addEventListener(`pointermove`,this.onDocPointerMove,y),this.document.addEventListener(`pointerup`,this.onDocPointerDone,y),this.document.addEventListener(`pointercancel`,this.onDocPointerDone,y),!0)}unbindDocMove(){this.docMoveBound&&=(this.document.removeEventListener(`pointermove`,this.onDocPointerMove,y),this.document.removeEventListener(`pointerup`,this.onDocPointerDone,y),this.document.removeEventListener(`pointercancel`,this.onDocPointerDone,y),!1)}onCropPointerDown=e=>{let{crop:t,disabled:n}=this.props,r=this.getBox();if(!t)return;let i=g(t,r.width,r.height);if(n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let a=e.target.dataset.ord,o=!!a,s=e.clientX,c=e.clientY,l=i.x,u=i.y;if(a){let t=e.clientX-r.x,n=e.clientY-r.y,o=0,d=0;a===`ne`||a==`e`?(o=t-(i.x+i.width),d=n-i.y,l=i.x,u=i.y+i.height):a===`se`||a===`s`?(o=t-(i.x+i.width),d=n-(i.y+i.height),l=i.x,u=i.y):a===`sw`||a==`w`?(o=t-i.x,d=n-(i.y+i.height),l=i.x+i.width,u=i.y):(a===`nw`||a==`n`)&&(o=t-i.x,d=n-i.y,l=i.x+i.width,u=i.y+i.height),s=l+r.x+o,c=u+r.y+d}this.evData={startClientX:s,startClientY:c,startCropX:l,startCropY:u,clientX:e.clientX,clientY:e.clientY,isResize:o,ord:a},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0})};onComponentPointerDown=e=>{let{crop:t,disabled:n,locked:r,keepSelection:i,onChange:a}=this.props,o=this.getBox();if(n||r||i&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});let s=e.clientX-o.x,c=e.clientY-o.y,l={unit:`px`,x:s,y:c,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:s,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,a(g(l,o.width,o.height),h(l,o.width,o.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0})};onDocPointerMove=e=>{let{crop:t,disabled:n,onChange:r,onDragStart:i}=this.props,a=this.getBox();if(n||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,i&&i(e));let{evData:o}=this;o.clientX=e.clientX,o.clientY=e.clientY;let s;s=o.isResize?this.resizeCrop():this.dragCrop(),f(t,s)||r(g(s,a.width,a.height),h(s,a.width,a.height))};onComponentKeyDown=t=>{let{crop:n,disabled:r,onChange:i,onComplete:a}=this.props;if(r)return;let o=t.key,s=!1;if(!n)return;let c=this.getBox(),l=this.makePixelCrop(c),d=(navigator.platform.match(`Mac`)?t.metaKey:t.ctrlKey)?e.nudgeStepLarge:t.shiftKey?e.nudgeStepMedium:e.nudgeStep;if(o===`ArrowLeft`?(l.x-=d,s=!0):o===`ArrowRight`?(l.x+=d,s=!0):o===`ArrowUp`?(l.y-=d,s=!0):o===`ArrowDown`&&(l.y+=d,s=!0),s){t.cancelable&&t.preventDefault(),l.x=u(l.x,0,c.width-l.width),l.y=u(l.y,0,c.height-l.height);let e=g(l,c.width,c.height),n=h(l,c.width,c.height);i(e,n),a&&a(e,n)}};onHandlerKeyDown=(t,n)=>{let{aspect:r=0,crop:i,disabled:a,minWidth:o=0,minHeight:s=0,maxWidth:c,maxHeight:l,onChange:u,onComplete:d}=this.props,p=this.getBox();if(a||!i)return;if(t.key===`ArrowUp`||t.key===`ArrowDown`||t.key===`ArrowLeft`||t.key===`ArrowRight`)t.stopPropagation(),t.preventDefault();else return;let m=(navigator.platform.match(`Mac`)?t.metaKey:t.ctrlKey)?e.nudgeStepLarge:t.shiftKey?e.nudgeStepMedium:e.nudgeStep,y=_(v(g(i,p.width,p.height),t.key,m,n),r,n,p.width,p.height,o,s,c,l);if(!f(i,y)){let e=h(y,p.width,p.height);u(y,e),d&&d(y,e)}};onDocPointerDone=e=>{let{crop:t,disabled:n,onComplete:r,onDragEnd:i}=this.props,a=this.getBox();this.unbindDocMove(),!(n||!t)&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,i&&i(e),r&&r(g(t,a.width,a.height),h(t,a.width,a.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}))};onDragFocus=()=>{this.componentRef.current?.scrollTo(0,0)};getCropStyle(){let{crop:e}=this.props;if(e)return{top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){let{evData:e}=this,t=this.getBox(),n=this.makePixelCrop(t),r=e.clientX-e.startClientX,i=e.clientY-e.startClientY;return n.x=u(e.startCropX+r,0,t.width-n.width),n.y=u(e.startCropY+i,0,t.height-n.height),n}getPointRegion(e,t,n,r){let{evData:i}=this,a=i.clientX-e.x,o=i.clientY-e.y,s;s=r&&t?t===`nw`||t===`n`||t===`ne`:o<i.startCropY;let c;return c=n&&t?t===`nw`||t===`w`||t===`sw`:a<i.startCropX,c?s?`nw`:`sw`:s?`ne`:`se`}resolveMinDimensions(e,t,n=0,r=0){let i=Math.min(n,e.width),a=Math.min(r,e.height);return!t||!i&&!a?[i,a]:t>1?i?[i,i/t]:[a*t,a]:a?[a*t,a]:[i,i/t]}resizeCrop(){let{evData:t}=this,{aspect:n=0,maxWidth:r,maxHeight:i}=this.props,a=this.getBox(),[o,s]=this.resolveMinDimensions(a,n,this.props.minWidth,this.props.minHeight),c=this.makePixelCrop(a),l=this.getPointRegion(a,t.ord,o,s),d=t.ord||l,f=t.clientX-t.startClientX,p=t.clientY-t.startClientY;(o&&d===`nw`||d===`w`||d===`sw`)&&(f=Math.min(f,-o)),(s&&d===`nw`||d===`n`||d===`ne`)&&(p=Math.min(p,-s));let m={unit:`px`,x:0,y:0,width:0,height:0};l===`ne`?(m.x=t.startCropX,m.width=f,n?(m.height=m.width/n,m.y=t.startCropY-m.height):(m.height=Math.abs(p),m.y=t.startCropY-m.height)):l===`se`?(m.x=t.startCropX,m.y=t.startCropY,m.width=f,n?m.height=m.width/n:m.height=p):l===`sw`?(m.x=t.startCropX+f,m.y=t.startCropY,m.width=Math.abs(f),n?m.height=m.width/n:m.height=p):l===`nw`&&(m.x=t.startCropX+f,m.width=Math.abs(f),n?(m.height=m.width/n,m.y=t.startCropY-m.height):(m.height=Math.abs(p),m.y=t.startCropY+p));let h=_(m,n,l,a.width,a.height,o,s,r,i);return n||e.xyOrds.indexOf(d)>-1?c=h:e.xOrds.indexOf(d)>-1?(c.x=h.x,c.width=h.width):e.yOrds.indexOf(d)>-1&&(c.y=h.y,c.height=h.height),c.x=u(c.x,0,a.width-c.width),c.y=u(c.y,0,a.height-c.height),c}renderCropSelection(){let{ariaLabels:n=e.defaultProps.ariaLabels,disabled:r,locked:i,renderSelectionAddon:a,ruleOfThirds:o,crop:s}=this.props,c=this.getCropStyle();if(s)return t.default.createElement(`div`,{style:c,className:`ReactCrop__crop-selection`,onPointerDown:this.onCropPointerDown,"aria-label":n.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:`group`},!r&&!i&&t.default.createElement(`div`,{className:`ReactCrop__drag-elements`,onFocus:this.onDragFocus},t.default.createElement(`div`,{className:`ReactCrop__drag-bar ord-n`,"data-ord":`n`}),t.default.createElement(`div`,{className:`ReactCrop__drag-bar ord-e`,"data-ord":`e`}),t.default.createElement(`div`,{className:`ReactCrop__drag-bar ord-s`,"data-ord":`s`}),t.default.createElement(`div`,{className:`ReactCrop__drag-bar ord-w`,"data-ord":`w`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-nw`,"data-ord":`nw`,tabIndex:0,"aria-label":n.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`nw`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-n`,"data-ord":`n`,tabIndex:0,"aria-label":n.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`n`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-ne`,"data-ord":`ne`,tabIndex:0,"aria-label":n.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`ne`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-e`,"data-ord":`e`,tabIndex:0,"aria-label":n.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`e`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-se`,"data-ord":`se`,tabIndex:0,"aria-label":n.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`se`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-s`,"data-ord":`s`,tabIndex:0,"aria-label":n.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`s`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-sw`,"data-ord":`sw`,tabIndex:0,"aria-label":n.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`sw`),role:`button`}),t.default.createElement(`div`,{className:`ReactCrop__drag-handle ord-w`,"data-ord":`w`,tabIndex:0,"aria-label":n.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,`w`),role:`button`})),a&&t.default.createElement(`div`,{className:`ReactCrop__selection-addon`,onPointerDown:e=>e.stopPropagation()},a(this.state)),o&&t.default.createElement(t.default.Fragment,null,t.default.createElement(`div`,{className:`ReactCrop__rule-of-thirds-hz`}),t.default.createElement(`div`,{className:`ReactCrop__rule-of-thirds-vt`})))}makePixelCrop(e){return g({...l,...this.props.crop||{}},e.width,e.height)}render(){let{aspect:e,children:n,circularCrop:r,className:i,crop:a,disabled:o,locked:s,style:c,ruleOfThirds:l}=this.props,{cropIsActive:u,newCropIsBeingDrawn:f}=this.state,p=a?this.renderCropSelection():null,m=d(`ReactCrop`,i,u&&`ReactCrop--active`,o&&`ReactCrop--disabled`,s&&`ReactCrop--locked`,f&&`ReactCrop--new-crop`,a&&e&&`ReactCrop--fixed-aspect`,a&&r&&`ReactCrop--circular-crop`,a&&l&&`ReactCrop--rule-of-thirds`,!this.dragStarted&&a&&!a.width&&!a.height&&`ReactCrop--invisible-crop`,r&&`ReactCrop--no-animate`);return t.default.createElement(`div`,{ref:this.componentRef,className:m,style:c},t.default.createElement(`div`,{ref:this.mediaRef,className:`ReactCrop__child-wrapper`,onPointerDown:this.onComponentPointerDown},n),a?t.default.createElement(`svg`,{className:`ReactCrop__crop-mask`,width:`100%`,height:`100%`},t.default.createElement(`defs`,null,t.default.createElement(`mask`,{id:`hole-${this.instanceId}`},t.default.createElement(`rect`,{width:`100%`,height:`100%`,fill:`white`}),r?t.default.createElement(`ellipse`,{cx:`${a.x+a.width/2}${a.unit}`,cy:`${a.y+a.height/2}${a.unit}`,rx:`${a.width/2}${a.unit}`,ry:`${a.height/2}${a.unit}`,fill:`black`}):t.default.createElement(`rect`,{x:`${a.x}${a.unit}`,y:`${a.y}${a.unit}`,width:`${a.width}${a.unit}`,height:`${a.height}${a.unit}`,fill:`black`}))),t.default.createElement(`rect`,{fill:`black`,fillOpacity:.5,width:`100%`,height:`100%`,mask:`url(#hole-${this.instanceId})`})):void 0,p)}},S=Math.PI/180;async function C(e,t,n,r=1,i=0){let a=t.getContext(`2d`);if(!a)throw Error(`No 2d context`);let o=e.naturalWidth/e.width,s=e.naturalHeight/e.height,c=window.devicePixelRatio;t.width=Math.floor(n.width*o*c),t.height=Math.floor(n.height*s*c),a.scale(c,c),a.imageSmoothingQuality=`high`;let l=n.x*o,u=n.y*s,d=i*S,f=e.naturalWidth/2,p=e.naturalHeight/2;a.save(),a.translate(-l,-u),a.translate(f,p),a.rotate(d),a.scale(r,r),a.translate(-f,-p),a.drawImage(e,0,0,e.naturalWidth,e.naturalHeight,0,0,e.naturalWidth,e.naturalHeight),a.restore()}function w(e){return new Promise(t=>{e.toBlob(t)})}var T=``;async function E(e,t,n=1,r=0){let i=document.createElement(`canvas`);C(e,i,t,n,r);let a=await w(i);return a?(T&&URL.revokeObjectURL(T),T=URL.createObjectURL(a),T):(console.error(`Failed to create blob`),``)}e.Component=x,e.ReactCrop=x,e.default=x,e.areCropsEqual=f,e.centerCrop=m,e.clamp=u,e.cls=d,e.containCrop=_,e.convertToPercentCrop=h,e.convertToPixelCrop=g,e.cropToCanvas=C,e.cropToImg=E,e.defaultCrop=l,e.makeAspectCrop=p,e.nudgeCrop=v});