Increase cropping ratio limit

CSSAInformationDepartment · Sep 15, 2023 · 6b83821 · 6b83821
1 parent 812acf9
commit 6b83821
Showing 1 changed file with 16 additions and 31 deletions.
diff --git a/src/myCSSAhub/templates/myCSSAhub/merchant_add.html b/src/myCSSAhub/templates/myCSSAhub/merchant_add.html
@@ -265,7 +265,7 @@ <h5 class="modal-title" id="exampleModalLabel">上传商家图片</h5>
             save = document.querySelector('#submit-cropped'),
             cropped = document.querySelector('.cropped-preview'),
             upload = document.querySelector('#file-input'),
-            base64_input = document.querySelector('#base64-input'), // 您的hidden input
+            base64_input = document.querySelector('#base64-input'), 
             cropper = '';
 
             checkFileSize = (size) => {
@@ -311,54 +311,39 @@ <h5 class="modal-title" id="exampleModalLabel">上传商家图片</h5>
                             // init cropper
                             cropper = new Cropper(img,{
                     preview: '.cropped-preview',
-                    aspectRatio: NaN,
+                    aspectRatio: 14/9,
                     });
                 }
                 };
                 reader.readAsDataURL(e.target.files[0]);
             }
             });
 
+
             // save on click
             save.addEventListener('click', (e) => {
-            e.preventDefault();
-            base64_input.value = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // Save cropped image's base64 to hidden input
-            // 显示图像预览
-            let previewContainer = document.getElementById("image-preview-container");
-            previewContainer.innerHTML = '';  // 清除之前的预览
-            let previewImage = document.createElement("img");
-            previewImage.src = base64_input.value;
-            previewImage.style.width = "100px";  // 或任何您想要的大小
-            previewContainer.appendChild(previewImage);
-            $('#modal').modal('hide'); // 关闭模态框
+                e.preventDefault();
+                base64_input.value = cropper.getCroppedCanvas().toDataURL('image/jpeg'); // Save cropped image's base64 to hidden input
+                // 显示图像预览
+                let previewContainer = document.getElementById("image-preview-container");
+                previewContainer.innerHTML = '';  
+                let previewImage = document.createElement("img");
+                previewImage.src = base64_input.value;
+                previewImage.style.width = "100px";  
+                previewContainer.appendChild(previewImage);
+                $('#modal').modal('hide'); 
             });
 
+
             document.getElementById("image-preview-container").addEventListener("click", function() {
             let imageSrc = this.querySelector("img").src;  // 获取当前容器中的图片URL
             let modalImage = document.getElementById("modalImage");
-            modalImage.src = imageSrc;  // 将模态框中的img标签的src设置为点击的图片的src
-            $("#imageModal").modal('show');  // 使用jQuery来显示模态框
+            modalImage.src = imageSrc;  
+            $("#imageModal").modal('show');  
             });
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     {% if form.merchant_image.value %}
         $("#input-b1").fileinput({
             theme: "fa",