feat:处理图片裁剪

src/components/ImgClipModal.jsx

@@ -87,8 +87,9 @@ class ImgClipModal extends React.Component {
           autoCropArea={1}
           autoCropArea={1}
           checkOrientation={false} 
           checkOrientation={false} 
           cropBoxResizable={false}
           cropBoxResizable={false}
-          minCropBoxWidth={cropBoxWidth}
-          minCropBoxHeight={cropBoxHeight}
+          center={true}
+          // minCropBoxWidth={cropBoxWidth}
+          // minCropBoxHeight={cropBoxHeight}
           cropBoxMovable={false}
           cropBoxMovable={false}
           dragMode='move'
           dragMode='move'
           onInitialized={(instance) => {
           onInitialized={(instance) => {
@@ -100,9 +101,21 @@ class ImgClipModal extends React.Component {
             this.setState({
             this.setState({
               hasImgReady:true
               hasImgReady:true
             })
             })
-            this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight)});
+            this.state.cropperInstace.setCropBoxData({width:Number(cropBoxWidth),height:Number(cropBoxHeight),top:(215 - cropBoxHeight/2)});
+            console.log("height++++",this.state.cropperInstace.getImageData().height);
+            console.log("width++++",this.state.cropperInstace.getImageData().width);
+            const ratio = (this.state.cropperInstace.getImageData().width/2)/500;
+            console.log("ratio++++",ratio);
             this.state.cropperInstace.setCanvasData({width:500});
             this.state.cropperInstace.setCanvasData({width:500});
             const that = this;
             const that = this;
+            // const containerData = this.state.cropperInstace.getContainerData();
+
+            // // Zoom to 50% from the center of the container.
+            // this.state.cropperInstace.zoomTo(.5, {
+            //   x: containerData.width / 2,
+            //   y: containerData.height / 2,
+            // });
+
             document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
             document.querySelector('.cropper__box').addEventListener('dblclick', function (e) {
               that.state.cropperInstace.rotate(90)
               that.state.cropperInstace.rotate(90)
             });
             });