From 6961ed24c9c44c16face3915c7b5a1b8fcfa09ce Mon Sep 17 00:00:00 2001
From: zliang <583212267@qq.com>
Date: Mon, 4 Dec 2023 16:08:34 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E8=80=85=EF=BC=8C=E5=8F=91=E7=8E=B0=E5=BD=93=E5=89=8D=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81gif=E7=9A=84=E8=A3=81=E5=89=AA=EF=BC=8C?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BF=AE=E6=94=B9=E3=80=82=E5=8F=AF=E5=8F=82?=
 =?UTF-8?q?=E8=80=83=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  3 +-
 .../amis/src/renderers/Form/InputImage.tsx    | 40 +++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 9db14f39398..eea2a405b9d 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,8 @@
   "dependencies": {
     "path-to-regexp": "^6.2.0",
     "postcss": "^8.4.14",
-    "qs": "6.9.7"
+    "qs": "6.9.7",
+    "super-image-cropper": "^1.0.18"
   },
   "devDependencies": {
     "@babel/generator": "^7.22.9",
diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx
index afaa5aa3c76..845a0d0e8dc 100644
--- a/packages/amis/src/renderers/Form/InputImage.tsx
+++ b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -10,7 +10,12 @@ import {
   PlainObject
 } from 'amis-core';
 // import 'cropperjs/dist/cropper.css';
+
+import {SuperImageCropper} from 'super-image-cropper';
 const Cropper = React.lazy(() => import('react-cropper'));
+
+const imageCropper = new SuperImageCropper();
+
 import DropZone from 'react-dropzone';
 import {FileRejection, ErrorCode, DropEvent} from 'react-dropzone';
 import 'blueimp-canvastoblob';
@@ -1100,18 +1105,39 @@ export default class ImageControl extends React.Component<
 
   handleCrop() {
     const {cropFormat, cropQuality} = this.props;
-    this.cropper.getCroppedCanvas().toBlob(
-      (file: File) => {
-        this.addFiles([file]);
+
+    imageCropper
+      .crop({
+        cropperInstance: this.cropper,
+        // src: this.cropper.url,
+        gifJsOptions: {
+          quality: cropQuality || 1
+        },
+        outputType: 'blob' // optional, default blob url
+      })
+      .then(blob => {
+        this.addFiles([blob]);
         this.setState({
           cropFile: undefined,
           locked: false,
           lockedReason: ''
         });
-      },
-      cropFormat || 'image/png',
-      cropQuality || 1
-    );
+        cropFormat || 'image/png';
+        // cropQuality || 1
+      });
+
+    // this.cropper.getCroppedCanvas().toBlob(
+    //   (file: File) => {
+    //     this.addFiles([file]);
+    //     this.setState({
+    //       cropFile: undefined,
+    //       locked: false,
+    //       lockedReason: ''
+    //     });
+    //   },
+    //   cropFormat || 'image/png',
+    //   cropQuality || 1
+    // );
   }
 
   cancelCrop() {

From f3f76015c83ff9d3c1959fb6fb0d4804b9573279 Mon Sep 17 00:00:00 2001
From: zliang01 <583212267@qq.com>
Date: Tue, 5 Dec 2023 19:43:00 +0800
Subject: [PATCH 2/2] Update InputImage.tsx

---
 packages/amis/src/renderers/Form/InputImage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx
index 845a0d0e8dc..c6038b5ca28 100644
--- a/packages/amis/src/renderers/Form/InputImage.tsx
+++ b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -11,8 +11,9 @@ import {
 } from 'amis-core';
 // import 'cropperjs/dist/cropper.css';
 
+
+import Cropper from 'react-cropper';
 import {SuperImageCropper} from 'super-image-cropper';
-const Cropper = React.lazy(() => import('react-cropper'));
 
 const imageCropper = new SuperImageCropper();