增加裁剪图片功能

resources/views/admin/form_custom/cut-image.blade.php

@@ -19,6 +19,13 @@
         border: none;
     }
 
+    .cropper-dialog {
+        position: absolute !important;
+        top: 48% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        width: 800px;
+    }
 </style>
 
 <div class="{{$viewClass['form-group']}} {{ $class }}">
@@ -68,12 +75,12 @@
 
 <!-- 模态框（Modal）的HTML结构 -->
 <div class="modal" id="cropperImageModal" tabindex="-1" role="dialog" aria-labelledby="cropperImageModal-labelledby" data-backdrop="static" data-keyboard="false">
-    <div class="modal-dialog modal-xl" >
+    <div class="modal-dialog modal-xl cropper-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="myModalLabel">{{trans('admin.crop_the_image')}}</h5>
             </div>
-            <div class="modal-body" style="height: 75vh;padding: 0;">
+            <div class="modal-body" style="height: 60vh;padding: 0;">
                 <img src="" id="cropperImage" style="max-width: 100%"/>
             </div>
             <div class="modal-footer">
@@ -148,6 +155,10 @@
         resize();
     }
 
+    if (options.fileNumLimit == 1) {
+        $this.find(".cropper-pick-new").hide();
+    }
+
     $this.find(".cropper-pick").on('click', function () {
         $this.find("#cropperFileInput").trigger("click");
     });
@@ -156,38 +167,24 @@
         $this.find("#cropperFileInput").trigger("click");
     });
 
-    if (options.fileNumLimit == 1) {
-        $this.find(".cropper-pick-new").hide();
-    }
-
     $this.find("#cropperFileInput").on('change', function () {
-
         var file = this.files[0];
         //定义读文件对象
         var reader = new FileReader();
         reader.onload = function () {
             imageOnload(reader.result);
-
         };
         reader.readAsDataURL(file);//File对象转换为dataURL
     });
-
     let cropper;  // 全局变量，用于保存 Cropper 实例
-
     //图片对象加载方法
     function imageOnload(url) {
-
-        //弹窗裁剪
-        $('#cropperImageModal').modal();
-
         const image = document.getElementById('cropperImage');
         image.src = url;
-
         if (cropper) {
             cropper.destroy();  // 如果已经存在实例，销毁之前的裁剪器
         }
         aspectRatio = options.aspectRatio || 1/1;  // 默认裁剪框比例为 1/1
-
         cropper = new Cropper(image, {
             aspectRatio: aspectRatio, // 设置裁剪框的宽高比（可调整）
             viewMode: 1,     // 设置裁剪框的视图模式
@@ -195,20 +192,21 @@
             dragMode: 'none',
             background: '#fff',
         });
-
-        $("#modalClose").one('click', function () {
-            $("#cropperFileInput").val('');
-            $('#cropperImageModal').modal('hide');
-        });
-
-        $("#modalSubmit").one('click', function () {
-            const canvas = cropper.getCroppedCanvas();
-            canvas.toBlob(function(blob) {
-                fileFromBlob = new File([blob], 'cropperImage.jpg', { type: "image/jpeg" });
-                $('#cropperImageModal').modal('hide');
-                $("#cropperFileInput").val('');
-                uploader.uploader.addFile(fileFromBlob);
-            },"image/jpeg", 0.8);
-        });
+        //弹窗裁剪
+        $('#cropperImageModal').modal();
     }
+    $("#modalClose").on('click', function () {
+        $("#cropperFileInput").val('');
+        $('#cropperImageModal').modal('hide');
+    });
+    $("#modalSubmit").on('click', function () {
+        const canvas = cropper.getCroppedCanvas();
+        canvas.toBlob(function(blob) {
+            fileFromBlob = new File([blob], 'cropperImage.jpg', { type: "image/jpeg" });
+            $('#cropperImageModal').modal('hide');
+            $("#cropperFileInput").val('');
+            //增加文件到上传队列
+            uploader.uploader.addFile(fileFromBlob);
+        },"image/jpeg", 0.9);
+    });
 </script>

resources/views/distributor/form_custom/cut-image.blade.php

@@ -19,6 +19,13 @@
         border: none;
     }
 
+    .cropper-dialog {
+        position: absolute !important;
+        top: 48% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        width: 800px;
+    }
 </style>
 
 <div class="{{$viewClass['form-group']}} {{ $class }}">
@@ -68,12 +75,12 @@
 
 <!-- 模态框（Modal）的HTML结构 -->
 <div class="modal" id="cropperImageModal" tabindex="-1" role="dialog" aria-labelledby="cropperImageModal-labelledby" data-backdrop="static" data-keyboard="false">
-    <div class="modal-dialog modal-xl" >
+    <div class="modal-dialog modal-xl cropper-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="myModalLabel">{{trans('admin.crop_the_image')}}</h5>
             </div>
-            <div class="modal-body" style="height: 75vh;padding: 0;">
+            <div class="modal-body" style="height: 60vh;padding: 0;">
                 <img src="" id="cropperImage" style="max-width: 100%"/>
             </div>
             <div class="modal-footer">
@@ -148,6 +155,10 @@
         resize();
     }
 
+    if (options.fileNumLimit == 1) {
+        $this.find(".cropper-pick-new").hide();
+    }
+
     $this.find(".cropper-pick").on('click', function () {
         $this.find("#cropperFileInput").trigger("click");
     });
@@ -156,38 +167,24 @@
         $this.find("#cropperFileInput").trigger("click");
     });
 
-    if (options.fileNumLimit == 1) {
-        $this.find(".cropper-pick-new").hide();
-    }
-
     $this.find("#cropperFileInput").on('change', function () {
-
         var file = this.files[0];
         //定义读文件对象
         var reader = new FileReader();
         reader.onload = function () {
             imageOnload(reader.result);
-
         };
         reader.readAsDataURL(file);//File对象转换为dataURL
     });
-
     let cropper;  // 全局变量，用于保存 Cropper 实例
-
     //图片对象加载方法
     function imageOnload(url) {
-
-        //弹窗裁剪
-        $('#cropperImageModal').modal();
-
         const image = document.getElementById('cropperImage');
         image.src = url;
-
         if (cropper) {
             cropper.destroy();  // 如果已经存在实例，销毁之前的裁剪器
         }
         aspectRatio = options.aspectRatio || 1/1;  // 默认裁剪框比例为 1/1
-
         cropper = new Cropper(image, {
             aspectRatio: aspectRatio, // 设置裁剪框的宽高比（可调整）
             viewMode: 1,     // 设置裁剪框的视图模式
@@ -195,20 +192,21 @@
             dragMode: 'none',
             background: '#fff',
         });
-
-        $("#modalClose").one('click', function () {
-            $("#cropperFileInput").val('');
-            $('#cropperImageModal').modal('hide');
-        });
-
-        $("#modalSubmit").one('click', function () {
-            const canvas = cropper.getCroppedCanvas();
-            canvas.toBlob(function(blob) {
-                fileFromBlob = new File([blob], 'cropperImage.jpg', { type: "image/jpeg" });
-                $('#cropperImageModal').modal('hide');
-                $("#cropperFileInput").val('');
-                uploader.uploader.addFile(fileFromBlob);
-            },"image/jpeg", 0.8);
-        });
+        //弹窗裁剪
+        $('#cropperImageModal').modal();
     }
+    $("#modalClose").on('click', function () {
+        $("#cropperFileInput").val('');
+        $('#cropperImageModal').modal('hide');
+    });
+    $("#modalSubmit").on('click', function () {
+        const canvas = cropper.getCroppedCanvas();
+        canvas.toBlob(function(blob) {
+            fileFromBlob = new File([blob], 'cropperImage.jpg', { type: "image/jpeg" });
+            $('#cropperImageModal').modal('hide');
+            $("#cropperFileInput").val('');
+            //增加文件到上传队列
+            uploader.uploader.addFile(fileFromBlob);
+        },"image/jpeg", 0.9);
+    });
 </script>