https://frontend.momodel.cn/back_b/977.f19ad36d.chunk.js

1(self.webpackChunk=self.webpackChunk||[]).push([[977],{170977:function(e,t,n){e.exports=function(e,t){"use strict";function n(e,t){return new Promise((function(n,a){var i,o=new Image;o.onload=function(){return n(o)},o.onerror=a,0==(null!==(i=e)&&!!i.match(/^\s*data:([a-z]+\/[a-z]+(;[a-z-]+=[a-z-]+)?)?(;base64)?,[a-z0-9!$&',()*+;=\-._~:@/?%\s]*\s*$/i))&&t&&(o.crossOrigin=t),o.src=e}))}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var a=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var n=[],a=!0,i=!1,o=void 0;try{for(var r,s=e[Symbol.iterator]();!(a=(r=s.next()).done)&&(n.push(r.value),!t||n.length!==t);a=!0);}catch(e){i=!0,o=e}finally{try{!a&&s.return&&s.return()}finally{if(i)throw o}}return n}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},h=function(e){var t=!1;return{promise:new Promise((function(n,a){e.then((function(e){return t?a({isCanceled:!0}):n(e)}),(function(e){return a(t?{isCanceled:!0}:e)}))})),cancel:function(){t=!0}}},u=!("undefined"==typeof window||"undefined"==typeof navigator||!("ontouchstart"in window||navigator.msMaxTouchPoints>0)),c="undefined"!=typeof File,d={touch:{react:{down:"onTouchStart",mouseDown:"onMouseDown",drag:"onTouchMove",move:"onTouchMove",mouseMove:"onMouseMove",up:"onTouchEnd",mouseUp:"onMouseUp"},native:{down:"touchstart",mouseDown:"mousedown",drag:"touchmove",move:"touchmove",mouseMove:"mousemove",up:"touchend",mouseUp:"mouseup"}},desktop:{react:{down:"onMouseDown",drag:"onDragOver",move:"onMouseMove",up:"onMouseUp"},native:{down:"mousedown",drag:"dragStart",move:"mousemove",up:"mouseup"}}},l=u?d.touch:d.desktop,g="undefined"!=typeof window&&window.devicePixelRatio?window.devicePixelRatio:1,p={x:.5,y:.5},m=function(){function e(t){a(this,e);var n=r(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.state={drag:!1,my:null,mx:null,image:p},n.handleImageReady=function(e){var t=n.getInitialSize(e.width,e.height);t.resource=e,t.x=.5,t.y=.5,n.setState({drag:!1,image:t},n.props.onImageReady),n.props.onLoadSuccess(t)},n.clearImage=function(){n.canvas.getContext("2d").clearRect(0,0,n.canvas.width,n.canvas.height),n.setState({image:p})},n.handleMouseDown=function(e){(e=e||window.event).preventDefault(),n.setState({drag:!0,mx:null,my:null})},n.handleMouseUp=function(){n.state.drag&&(n.setState({drag:!1}),n.props.onMouseUp())},n.handleMouseMove=function(e){if(e=e||window.event,!1!==n.state.drag){e.preventDefault();var t=e.targetTouches?e.targetTouches[0].pageX:e.clientX,a=e.targetTouches?e.targetTouches[0].pageY:e.clientY,i={mx:t,my:a},r=n.props.rotate;if(r=(r%=360)<0?r+360:r,n.state.mx&&n.state.my){var s=n.state.mx-t,h=n.state.my-a,u=n.state.image.width*n.props.scale,c=n.state.image.height*n.props.scale,d=n.getCroppingRect(),l=d.x,g=d.y;l*=u,g*=c;var p=function(e){return e*(Math.PI/180)},m=Math.cos(p(r)),v=Math.sin(p(r)),f=g+-s*v+h*m,w={x:(l+s*m+h*v)/u+1/n.props.scale*n.getXScale()/2,y:f/c+1/n.props.scale*n.getYScale()/2};n.props.onPositionChange(w),i.image=o({},n.state.image,w)}n.setState(i),n.props.onMouseMove(e)}},n.setCanvas=function(e){n.canvas=e},n.canvas=null,n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}

1(e,t.Component),i(e,[{key:"componentDidMount",value:function(){this.props.disableHiDPIScaling&&(g=1);var e=this.canvas.getContext("2d");if(this.props.image&&this.loadImage(this.props.image),this.paint(e),document){var t=!!function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){e=!1}return e}()&&{passive:!1},n=l.native;document.addEventListener(n.move,this.handleMouseMove,t),document.addEventListener(n.up,this.handleMouseUp,t),u&&(document.addEventListener(n.mouseMove,this.handleMouseMove,t),document.addEventListener(n.mouseUp,this.handleMouseUp,t))}}},{key:"componentWillReceiveProps",value:function(e){e.image&&this.props.image!==e.image||this.props.width!==e.width||this.props.height!==e.height?this.loadImage(e.image):e.image||this.clearImage()}},{key:"componentDidUpdate",value:function(e,t){var n=this.canvas.getContext("2d");n.clearRect(0,0,this.canvas.width,this.canvas.height),this.paint(n),this.paintImage(n,this.state.image,this.props.border),e.image===this.props.image&&e.width===this.props.width&&e.height===this.props.height&&e.position===this.props.position&&e.scale===this.props.scale&&e.rotate===this.props.rotate&&t.my===this.state.my&&t.mx===this.state.mx&&t.image.x===this.state.image.x&&t.image.y===this.state.image.y||this.props.onImageChange()}},{key:"componentWillUnmount",value:function(){if(document){var e=l.native;document.removeEventListener(e.move,this.handleMouseMove,!1),document.removeEventListener(e.up,this.handleMouseUp,!1),u&&(document.removeEventListener(e.mouseMove,this.handleMouseMove,!1),document.removeEventListener(e.mouseUp,this.handleMouseUp,!1))}}},{key:"isVertical",value:function(){return this.props.rotate%180!=0}},{key:"getBorders",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.border;return Array.isArray(e)?e:[e,e]}},{key:"getDimensions",value:function(){var e=this.props,t=e.width,n=e.height,a=e.rotate,i=e.border,o={},r=this.getBorders(i),h=s(r,2),u=h[0],c=h[1],d=t,l=n;return this.isVertical()?(o.width=l,o.height=d):(o.width=d,o.height=l),o.width+=2*u,o.height+=2*c,{canvas:o,rotate:a,width:t,height:n,border:i}}},{key:"getImage",value:function(){var e=this.getCroppingRect(),t=this.state.image;e.x*=t.resource.width,e.y*=t.resource.height,e.width*=t.resource.width,e.height*=t.resource.height;var n=document.createElement("canvas");this.isVertical()?(n.width=e.height,n.height=e.width):(n.width=e.width,n.height=e.height);var a=n.getContext("2d");return a.translate(n.width/2,n.height/2),a.rotate(this.props.rotate*Math.PI/180),a.translate(-n.width/2,-n.height/2),this.isVertical()&&a.translate((n.width-n.height)/2,(n.height-n.width)/2),a.drawImage(t.resource,-e.x,-e.y),n}},{key:"getImageScaledToCanvas",value:function(){var e=this.getDimensions(),t=e.width,n=e.height,a=document.createElement("canvas");return this.isVertical()?(a.width=n,a.height=t):(a.width=t,a.height=n),this.paintImage(a.getContext("2d"),this.state.image,0,1),a}},{key:"getXScale",value:function(){var e=this.props.width/this.props.height,t=this.state.image.width/this.state.image.height;return Math.min(1,e/t)}},{key:"getYScale",value:function(){var e=this.props.height/this.props.width,t=this.state.image.height/this.state.image.width;return Math.min(1,e/t)}},{key:"getCroppingRect",value:function(){var e=this.props.position||{x:this.state.image.x,y:this.state.image.y},t=1/this.props.scale*this.getXScale(),n=1/this.props.scale*this.getYScale(),a={x:e.x-t/2,y:e.y-n/2,width:t,height:n},i=0,r=1-a.width,s=0,h=1-a.height;return(this.props.disableBoundaryChecks||t>1||n>1)&&(i=-a.width,r=1,s=-a.height,h=1),o({},a,{x:Math.max(i,Math.min(a.x,r)),y:Math.max(s,Math.min(a.y,h))})}},{key:"loadImage",value:function(e){var t;c&&e instanceof File?this.loadingImage=h((t=e,new Promise((function(e,a){var i=new FileReader;i.onload=function(t){try{var i=n(t.target.result);e(i)}catch(t){a(t)}},i.readAsDataURL(t)})))).promise.then(this.handleImageReady).catch(this.props.onLoadFailure):"string"==typeof e&&(this.loadingImage=h(n(e,this.props.crossOrigin)).promise.then(this.handleImageReady).catch(this.props.onLoadFailure))}},{key:"getInitialSize",value:function(e,t){var n=void 0,a=void 0,i=this.getDimensions();return i.height/i.width>t/e?a=e*((n=this.getDimensions().height)/t):n=t*((a=this.getDimensions().width)/e),{height:n,width:a}}},{key:"paintImage",value:function(e,t,n){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:g;if(t.resource){var i=this.calculatePosition(t,n);e.save(),e.translate(e.canvas.width/2,e.canvas.height/2),e.rotate(this.props.rotate*Math.PI/180),e.translate(-e.canvas.width/2,-e.canvas.height/2),this.isVertical()&&e.translate((e.canvas.width-e.canvas.height)/2,(e.canvas.height-e.canvas.width)/2),e.scale(a,a),e.globalCompositeOperation="destination-over",e.drawImage(t.resource,i.x,i.y,i.width,i.height),e.restore(

1)}}},{key:"calculatePosition",value:function(e,t){e=e||this.state.image;var n=this.getBorders(t),a=s(n,2),i=a[0],o=a[1],r=this.getCroppingRect(),h=e.width*this.props.scale,u=e.height*this.props.scale,c=-r.x*h,d=-r.y*u;return this.isVertical()?(c+=o,d+=i):(c+=i,d+=o),{x:c,y:d,height:u,width:h}}},{key:"paint",value:function(e){e.save(),e.scale(g,g),e.translate(0,0),e.fillStyle="rgba("+this.props.color.slice(0,4).join(",")+")";var t=this.props.borderRadius,n=this.getDimensions(),a=this.getBorders(n.border),i=s(a,2),o=i[0],r=i[1],h=n.canvas.height,u=n.canvas.width;t=Math.max(t,0),t=Math.min(t,u/2-o,h/2-r),e.beginPath(),function(e,t,n,a,i,o){if(0===o)e.rect(t,n,a,i);else{var r=a-o,s=i-o;e.translate(t,n),e.arc(o,o,o,Math.PI,1.5*Math.PI),e.lineTo(r,0),e.arc(r,o,o,1.5*Math.PI,2*Math.PI),e.lineTo(a,s),e.arc(r,s,o,2*Math.PI,.5*Math.PI),e.lineTo(o,i),e.arc(o,s,o,.5*Math.PI,Math.PI),e.translate(-t,-n)}}(e,o,r,u-2*o,h-2*r,t),e.rect(u,0,-u,h),e.fill("evenodd"),e.restore()}},{key:"render",value:function(){var e=this.props,n=(e.scale,e.rotate,e.image,e.border,e.borderRadius,e.width,e.height,e.position,e.color,e.style),a=(e.crossOrigin,e.onLoadFailure,e.onLoadSuccess,e.onImageReady,e.onImageChange,e.onMouseUp,e.onMouseMove,e.onPositionChange,e.disableBoundaryChecks,e.disableHiDPIScaling,function(e,t){var n={};for(var a in e)t.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(n[a]=e[a]);return n}(e,["scale","rotate","image","border","borderRadius","width","height","position","color","style","crossOrigin","onLoadFailure","onLoadSuccess","onImageReady","onImageChange","onMouseUp","onMouseMove","onPositionChange","disableBoundaryChecks","disableHiDPIScaling"])),i=this.getDimensions(),r={width:i.canvas.width,height:i.canvas.height,cursor:this.state.drag?"grabbing":"grab",touchAction:"none"},s={width:i.canvas.width*g,height:i.canvas.height*g,style:o({},r,n)};return s[l.react.down]=this.handleMouseDown,u&&(s[l.react.mouseDown]=this.handleMouseDown),t.createElement("canvas",o({ref:this.setCanvas},s,a))}}]),e}();return m.propTypes={scale:e.number,rotate:e.number,image:e.oneOfType([e.string].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(c?[e.instanceOf(File)]:[]))),border:e.oneOfType([e.number,e.arrayOf(e.number)]),borderRadius:e.number,width:e.number,height:e.number,position:e.shape({x:e.number,y:e.number}),color:e.arrayOf(e.number),crossOrigin:e.oneOf(["","anonymous","use-credentials"]),onLoadFailure:e.func,onLoadSuccess:e.func,onImageReady:e.func,onImageChange:e.func,onMouseUp:e.func,onMouseMove:e.func,onPositionChange:e.func,disableBoundaryChecks:e.bool,disableHiDPIScaling:e.bool},m.defaultProps={scale:1,rotate:0,border:25,borderRadius:0,width:200,height:200,color:[0,0,0,.5],onLoadFailure:function(){},onLoadSuccess:function(){},onImageReady:function(){},onImageChange:function(){},onMouseUp:function(){},onMouseMove:function(){},onPositionChange:function(){},disableBoundaryChecks:!1,disableHiDPIScaling:!1},m}(n(605556),n(296540))}}]);
2//# sourceMappingURL=977.f19ad36d.chunk.js.map