fix：修复图片裁剪在新版依赖下的报错，并默认开启旋转 (#2563)

docs/zh-CN/components/form/input-image.md

@@ -32,7 +32,7 @@ order: 27
 ```javascript
 const express = require('express');
 const multer = require('multer');
-const upload = multer({ dest: 'uploads/' });
+const upload = multer({dest: 'uploads/'});
 const app = express();
 
 app.use(express.static('public'));
@@ -50,9 +50,7 @@ app.post('/uploader', upload.single('file'), function (req, res, next) {
 // 配合上面的返回值，将 uploads 目录可读，这样返回的文件才能正常显示
 app.get('uploads', express.static('uploads'));
 
-app.listen(8080, function () {
-});
-
+app.listen(8080, function () {});
 ```
 
 这个接口需要返回图片地址，比如下面的格式
@@ -75,7 +73,6 @@ app.listen(8080, function () {
 }
 ```
 
-
 ## 限制文件类型
 
 可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`

src/renderers/Form/InputImage.tsx

@@ -370,7 +370,7 @@ export default class ImageControl extends React.Component<
     file: any;
     executor: () => void;
   }> = [];
-  cropper = React.createRef<Cropper>();
+  cropper: Cropper;
   dropzone = React.createRef<any>();
   frameImageRef = React.createRef<any>();
   current: FileValue | FileX | null = null;
@@ -512,8 +512,8 @@ export default class ImageControl extends React.Component<
         guides: true,
         dragMode: 'move',
         viewMode: 1,
-        rotatable: false,
-        scalable: false,
+        rotatable: true,
+        scalable: true,
         ...crop
       };
     }
@@ -862,7 +862,7 @@ export default class ImageControl extends React.Component<
   }
 
   handleCrop() {
-    this.cropper.current!.getCroppedCanvas().toBlob((file: File) => {
+    this.cropper.getCroppedCanvas().toBlob((file: File) => {
       this.addFiles([file]);
       this.setState({
         cropFile: undefined,
@@ -884,7 +884,7 @@ export default class ImageControl extends React.Component<
   }
 
   rotatableCrop() {
-    this.cropper.current!.rotate(90);
+    this.cropper.rotate(45);
   }
 
   addFiles(files: Array<FileX>) {
@@ -1211,7 +1211,13 @@ export default class ImageControl extends React.Component<
         {cropFile ? (
           <div className={cx('ImageControl-cropperWrapper')}>
             <Suspense fallback={<div>...</div>}>
-              <Cropper {...crop} ref={this.cropper} src={cropFile.preview} />
+              <Cropper
+                {...crop}
+                onInitialized={instance => {
+                  this.cropper = instance;
+                }}
+                src={cropFile.preview}
+              />
             </Suspense>
             <div className={cx('ImageControl-croperToolbar')}>
               {crop.rotatable && (