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..c6038b5ca28 100644
--- a/packages/amis/src/renderers/Form/InputImage.tsx
+++ b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -10,7 +10,13 @@ import {
   PlainObject
 } from 'amis-core';
 // import 'cropperjs/dist/cropper.css';
-const Cropper = React.lazy(() => import('react-cropper'));
+
+
+import Cropper from 'react-cropper';
+import {SuperImageCropper} from 'super-image-cropper';
+
+const imageCropper = new SuperImageCropper();
+
 import DropZone from 'react-dropzone';
 import {FileRejection, ErrorCode, DropEvent} from 'react-dropzone';
 import 'blueimp-canvastoblob';
@@ -1100,18 +1106,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() {