|
|
@@ -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>
|
