From a3e39e8744677b8fe7df81e19c085de1c7fab70b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= <wuduoyi@baidu.com>
Date: Wed, 15 Sep 2021 23:25:09 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=A3=81=E5=89=AA=E5=9C=A8=E6=96=B0=E7=89=88=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96=E4=B8=8B=E7=9A=84=E6=8A=A5=E9=94=99=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=BC=80=E5=90=AF=E6=97=8B=E8=BD=AC=20(#2563?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh-CN/components/form/input-image.md |  7 ++-----
 src/renderers/Form/InputImage.tsx         | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/docs/zh-CN/components/form/input-image.md b/docs/zh-CN/components/form/input-image.md
index 9b9d30429..b04cfcd9d 100755
--- a/docs/zh-CN/components/form/input-image.md
+++ b/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`
diff --git a/src/renderers/Form/InputImage.tsx b/src/renderers/Form/InputImage.tsx
index 1ab53bbdd..81fa6314e 100644
--- a/src/renderers/Form/InputImage.tsx
+++ b/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 && (