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

<style>
    .webuploader-pick {
        background-color: @primary;
    }

    .web-uploader .placeholder .flashTip a {
        color: @primary(-10);
    }

    .web-uploader .statusBar .upload-progress span.percentage,
    .web-uploader .filelist li p.upload-progress span {
        background: @primary(-8);
    }

    .web-uploader .dnd-area.webuploader-dnd-over {
        border: 3px dashed #999 !important;
    }
    .web-uploader .dnd-area.webuploader-dnd-over .placeholder {
        border: none;
    }

</style>

<div class="{{$viewClass['form-group']}} {{ $class }}">

    <label for="{{$column}}" class="{{$viewClass['label']}} control-label">{!! $label !!}</label>

    <div class="{{$viewClass['field']}}">

        @include('admin::form.error')

        <input name="{{ $name }}" class="file-input" type="hidden" {!! $attributes !!}/>

        <div class="web-uploader {{ $fileType }}">
            <div class="queueList dnd-area" @if(!empty($upimgdemo)) style="width: 220px;float: left;" @endif>
                <div class="placeholder">
                    <div class="file-picker">
                        <div class="cropper-pick btn btn-primary" style="margin: 0 auto 15px;"><i class="feather icon-folder"></i>&nbsp; {{trans('admin.uploader.add_new_media')}}</div>
                        <input type="file" name="_file_" id="cropperFileInput" style="display: none" />
                    </div>
{{--                    <p>{{trans('admin.uploader.drag_file')}}</p>--}}
                </div>
            </div>
            {{-- 上传图片示例--}}
            @include('admin::form.upload-img-demo')
            <div class="statusBar" style="display:none;">
                <div class="upload-progress progress progress-bar-primary pull-left">
                    <div class="progress-bar progress-bar-striped active" style="line-height:18px">0%</div>
                </div>
                <div class="info"></div>
                <div class="btns">
                   <div class="new-add-file-button">
                       <div class="cropper-pick-new btn btn-primary"><i class="feather icon-folder"></i> &nbsp;{{trans('admin.uploader.go_on_add')}}</div>
                   </div>
                    @if($showUploadBtn)
                    &nbsp;
                    <div class="upload-btn btn btn-primary"><i class="feather icon-upload"></i> &nbsp;{{trans('admin.upload')}}</div>
                    @endif
                </div>
            </div>
        </div>

        @include('admin::form.help-block')
    </div>
</div>



<!-- 模态框（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-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;">
                <img src="" id="cropperImage" style="max-width: 100%"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="modalClose">{{trans('admin.close')}}</button>
                <button type="button" class="btn btn-primary" id="modalSubmit">{{trans('admin.submit')}}</button>
            </div>
        </div>
    </div>
</div>



<link href="/vendor/cropper/cropper.min.css" rel="stylesheet">
<script src="/vendor/cropper/cropper.min.js"></script>

<script require="@webuploader" init="{!! $selector !!}">
    var uploader,
        newPage,
        options = {!! $options !!},
        events = options.events;

    init();

    function init() {
        var opts = $.extend({
            selector: $this,
        //    addFileButton: $this.find('.add-file-button'),
            inputSelector: $this.find('.file-input'),
        }, options);

        opts.upload = $.extend({
            {{--pick: {--}}
            {{--    id: $this.find('.file-picker'),--}}
            {{--    name: '_file_',--}}
            {{--    label: '<i class="feather icon-folder"><\/i>&nbsp; {!! trans('admin.uploader.add_new_media') !!}'--}}
            {{--},--}}
            // dnd: $this.find('.dnd-area'),
            paste: $this.find('.web-uploader')
        }, opts);

        uploader = Dcat.Uploader(opts);
        uploader.build();
        uploader.preview();


        for (var i = 0; i < events.length; i++) {
            var evt = events[i];
            if (evt.event && evt.script) {
                if (evt.once) {
                    uploader.uploader.once(evt.event, evt.script.bind(uploader))
                } else {
                    uploader.uploader.on(evt.event, evt.script.bind(uploader))
                }
            }
        }

        function resize() {
            setTimeout(function () {
                if (! uploader) return;

                uploader.refreshButton();
                resize();

                if (! newPage) {
                    newPage = 1;
                    $(document).one('pjax:complete', function () {
                        uploader = null;
                    });
                }
            }, 250);
        }
        resize();
    }

    $this.find(".cropper-pick").on('click', function () {
        $this.find("#cropperFileInput").trigger("click");
    });

    $this.find(".cropper-pick-new").on('click', function () {
        $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,     // 设置裁剪框的视图模式
            autoCropArea: 0.95, // 设置自动裁剪区域占比
            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);
        });
    }
</script>