增加裁剪图片功能

app/Admin/Repositories/DistAdminDistributor.php

@@ -151,20 +151,20 @@ class DistAdminDistributor extends EloquentRepository
             'template_file' => config('dictionary.landing_page_default_template')
         ]);
         //生成privacy
-        $privacy = $sitePages->create([
-            'title' => 'Privacy',
-            'status' => 1,
-            'author' => 'admin',
-            'dist_id'=>$distId,
-            'content' => 'Default Content',
-            'slug' => 'privacy',
-            'seo_title' => 'Privacy',
-            'post_date' => Carbon::now(),
-            'created_at'=>Carbon::now(),
-            'updated_at'=>Carbon::now(),
-            'page_type' => 1,
-            'template_file' => config('dictionary.landing_page_default_template')
-        ]);
+//        $privacy = $sitePages->create([
+//            'title' => 'Privacy',
+//            'status' => 1,
+//            'author' => 'admin',
+//            'dist_id'=>$distId,
+//            'content' => 'Default Content',
+//            'slug' => 'privacy',
+//            'seo_title' => 'Privacy',
+//            'post_date' => Carbon::now(),
+//            'created_at'=>Carbon::now(),
+//            'updated_at'=>Carbon::now(),
+//            'page_type' => 1,
+//            'template_file' => config('dictionary.landing_page_default_template')
+//        ]);
         //生成sales
         $sales = $sitePages->create([
             'title' => 'Sales',

app/Admin/bootstrap.php

@@ -1,6 +1,9 @@
 <?php
 
+use App\Exceptions\Form\CutImage;
+use App\Exceptions\Form\MultipleCutImage;
 use Dcat\Admin\Admin;
+use Dcat\Admin\Form\Field\MultipleImage;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Form;
 use Dcat\Admin\Grid\Filter;
@@ -54,3 +57,7 @@ Editor::resolving(function (Editor $editor) {
         'toolbar'=>["undo redo | preview fullscreen | formatselect  | fontsizeselect bold italic underline strikethrough forecolor backcolor | link image media blockquote removeformat codesample","alignleft aligncenter alignright  alignjustify| indent outdent bullist numlist table subscript superscript | code"],
     ]);
 });
+
+//裁剪图片表单扩展
+Form::extend('multipleCutImage', MultipleCutImage::class);
+Form::extend('cutImage', CutImage::class);

app/Distributor/bootstrap.php

@@ -1,5 +1,7 @@
 <?php
 
+use App\Exceptions\Form\CutImage;
+use App\Exceptions\Form\MultipleCutImage;
 use Dcat\Admin\Admin;
 use Dcat\Admin\Grid;
 use Dcat\Admin\Form;
@@ -64,3 +66,8 @@ Editor::resolving(function (Editor $editor) {
 Admin::menu(function (Menu $menu) {
     $menu->view('distributor.partials_custom.menu');
 });
+
+
+//裁剪图片表单扩展
+Form::extend('multipleCutImage', MultipleCutImage::class);
+Form::extend('cutImage', CutImage::class);

app/Exceptions/Form/CutImage.php

@@ -0,0 +1,137 @@
+<?php
+
+namespace App\Exceptions\Form;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Dcat\Admin\Form\Field\Image;
+use Dcat\Admin\Form\Field\File;
+use Dcat\Admin\Form\Field\ImageField;
+
+/**
+ * @method $this backup(string $name = 'default') Backups current image state as fallback for reset method under an optional name. Overwrites older state on every call, unless a different name is passed.
+ * @method $this blur(int $amount = 1) Apply a gaussian blur filter with a optional amount on the current image. Use values between 0 and 100.
+ * @method $this brightness(int $level) Changes the brightness of the current image by the given level. Use values between -100 for min. brightness. 0 for no change and +100 for max. brightness.
+ * @method $this cache(\Closure $callback, int $lifetime = null, boolean $returnObj = false) Method to create a new cached image instance from a Closure callback. Pass a lifetime in minutes for the callback and decide whether you want to get an Intervention Image instance as return value or just receive the image stream.
+ * @method $this canvas(int $width, int $height, mixed $bgcolor = null) Factory method to create a new empty image instance with given width and height. You can define a background-color optionally. By default the canvas background is transparent.
+ * @method $this circle(int $radius, int $x, int $y, \Closure $callback = null) Draw a circle at given x, y, coordinates with given radius. You can define the appearance of the circle by an optional closure callback.
+ * @method $this colorize(int $red, int $green, int $blue) Change the RGB color values of the current image on the given channels red, green and blue. The input values are normalized so you have to include parameters from 100 for maximum color value. 0 for no change and -100 to take out all the certain color on the image.
+ * @method $this contrast(int $level) Changes the contrast of the current image by the given level. Use values between -100 for min. contrast 0 for no change and +100 for max. contrast.
+ * @method $this crop(int $width, int $height, int $x = null, int $y = null) Cut out a rectangular part of the current image with given width and height. Define optional x,y coordinates to move the top-left corner of the cutout to a certain position.
+ * @method $this ellipse(int $width, int $height, int $x, int $y, \Closure $callback = null) Draw a colored ellipse at given x, y, coordinates. You can define width and height and set the appearance of the circle by an optional closure callback.
+ * @method $this exif(string $key = null) Read Exif meta data from current image.
+ * @method $this iptc(string $key = null) Read Iptc meta data from current image.
+ * @method $this flip(string $mode = 'h') Mirror the current image horizontally or vertically by specifying the mode.
+ * @method $this fit(int $width, int $height = null, \Closure $callback = null, string $position = 'center') Combine cropping and resizing to format image in a smart way. The method will find the best fitting aspect ratio of your given width and height on the current image automatically, cut it out and resize it to the given dimension. You may pass an optional Closure callback as third parameter, to prevent possible upsizing and a custom position of the cutout as fourth parameter.
+ * @method $this gamma(float $correction) Performs a gamma correction operation on the current image.
+ * @method $this greyscale() Turns image into a greyscale version.
+ * @method $this heighten(int $height, \Closure $callback = null) Resizes the current image to new height, constraining aspect ratio. Pass an optional Closure callback as third parameter, to apply additional constraints like preventing possible upsizing.
+ * @method $this insert(mixed $source, string $position = 'top-left', int $x = 0, int $y = 0) Paste a given image source over the current image with an optional position and a offset coordinate. This method can be used to apply another image as watermark because the transparency values are maintained.
+ * @method $this interlace(boolean $interlace = true) Determine whether an image should be encoded in interlaced or standard mode by toggling interlace mode with a boolean parameter. If an JPEG image is set interlaced the image will be processed as a progressive JPEG.
+ * @method $this invert() Reverses all colors of the current image.
+ * @method $this limitColors(int $count, mixed $matte = null) Method converts the existing colors of the current image into a color table with a given maximum count of colors. The function preserves as much alpha channel information as possible and blends transarent pixels against a optional matte color.
+ * @method $this line(int $x1, int $y1, int $x2, int $y2, \Closure $callback = null) Draw a line from x,y point 1 to x,y point 2 on current image. Define color and/or width of line in an optional Closure callback.
+ * @method $this make(mixed $source) Universal factory method to create a new image instance from source, which can be a filepath, a GD image resource, an Imagick object or a binary image data.
+ * @method $this mask(mixed $source, boolean $mask_with_alpha) Apply a given image source as alpha mask to the current image to change current opacity. Mask will be resized to the current image size. By default a greyscale version of the mask is converted to alpha values, but you can set mask_with_alpha to apply the actual alpha channel. Any transparency values of the current image will be maintained.
+ * @method $this opacity(int $transparency) Set the opacity in percent of the current image ranging from 100% for opaque and 0% for full transparency.
+ * @method $this orientate() This method reads the EXIF image profile setting 'Orientation' and performs a rotation on the image to display the image correctly.
+ * @method $this pickColor(int $x, int $y, string $format = 'array') Pick a color at point x, y out of current image and return in optional given format.
+ * @method $this pixel(mixed $color, int $x, int $y) Draw a single pixel in given color on x, y position.
+ * @method $this pixelate(int $size) Applies a pixelation effect to the current image with a given size of pixels.
+ * @method $this polygon(array $points, \Closure $callback = null) Draw a colored polygon with given points. You can define the appearance of the polygon by an optional closure callback.
+ * @method $this rectangle(int $x1, int $y1, int $x2, int $y2, \Closure $callback = null) Draw a colored rectangle on current image with top-left corner on x,y point 1 and bottom-right corner at x,y point 2. Define the overall appearance of the shape by passing a Closure callback as an optional parameter.
+ * @method $this reset(string $name = 'default') Resets all of the modifications to a state saved previously by backup under an optional name.
+ * @method $this resize(int $width, int $height = null, \Closure $callback = null) Resizes current image based on given width and/or height. To contraint the resize command, pass an optional Closure callback as third parameter.
+ * @method $this resizeCanvas(int $width, int $height, string $anchor = 'center', boolean $relative = false, mixed $bgcolor = null) Resize the boundaries of the current image to given width and height. An anchor can be defined to determine from what point of the image the resizing is going to happen. Set the mode to relative to add or subtract the given width or height to the actual image dimensions. You can also pass a background color for the emerging area of the image.
+ * @method $this rotate(float $angle, mixed $bgcolor = null) Rotate the current image counter-clockwise by a given angle. Optionally define a background color for the uncovered zone after the rotation.
+ * @method $this sharpen(int $amount = 10) Sharpen current image with an optional amount. Use values between 0 and 100.
+ * @method $this text(string $text, int $x = 0, int $y = 0, \Closure $callback = null) Write a text string to the current image at an optional x,y basepoint position. You can define more details like font-size, font-file and alignment via a callback as the fourth parameter.
+ * @method $this trim(string $base = 'top-left', array $away = array('top', 'bottom', 'left', 'right'), int $tolerance = 0, int $feather = 0) Trim away image space in given color. Define an optional base to pick a color at a certain position and borders that should be trimmed away. You can also set an optional tolerance level, to trim similar colors and add a feathering border around the trimed image.
+ * @method $this widen(int $width, \Closure $callback = null) Resizes the current image to new width, constraining aspect ratio. Pass an optional Closure callback as third parameter, to apply additional constraints like preventing possible upsizing.
+ */
+class CutImage extends File
+{
+    use ImageField;
+
+    protected $rules = ['nullable', 'image'];
+
+    protected $view = 'admin.form_custom.cut-image';
+
+    public function __construct($column, $arguments = [])
+    {
+        parent::__construct($column, $arguments);
+
+        $this->setupImage();
+    }
+    /*
+     * 裁剪比例 格式：1/1
+     */
+    public function aspectRatio(float $value = 1)
+    {
+        $this->options['aspectRatio'] = $value;
+
+        return $this;
+    }
+
+    protected function setupImage()
+    {
+        if (! isset($this->options['accept'])) {
+            $this->options['accept'] = [];
+        }
+
+        $this->options['accept']['mimeTypes'] = 'image/*';
+        $this->options['isImage'] = true;
+    }
+
+    /**
+     * @param  array  $options  support:
+     *                          [
+     *                          'width' => 100,
+     *                          'height' => 100,
+     *                          'min_width' => 100,
+     *                          'min_height' => 100,
+     *                          'max_width' => 100,
+     *                          'max_height' => 100,
+     *                          'ratio' => 3/2, // (width / height)
+     *                          ]
+     * @return $this
+     */
+    public function dimensions(array $options)
+    {
+        if (! $options) {
+            return $this;
+        }
+
+        $this->mergeOptions(['dimensions' => $options]);
+
+        foreach ($options as $k => &$v) {
+            $v = "$k=$v";
+        }
+
+        return $this->rules('dimensions:'.implode(',', $options));
+    }
+
+    /**
+     * Set ratio constraint.
+     *
+     * @param  float  $ratio  width/height
+     * @return $this
+     */
+    public function ratio($ratio)
+    {
+        if ($ratio <= 0) {
+            return $this;
+        }
+
+        return $this->dimensions(['ratio' => $ratio]);
+    }
+
+    /**
+     * @param  UploadedFile  $file
+     */
+    protected function prepareFile(UploadedFile $file)
+    {
+        $this->callInterventionMethods($file->getRealPath(), $file->getMimeType());
+
+        $this->uploadAndDeleteOriginalThumbnail($file);
+    }
+}

app/Exceptions/Form/MultipleCutImage.php

@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Exceptions\Form;
+
+use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Form\Field\Image;
+use PhpParser\Node\Expr\Cast\Double;
+
+class MultipleCutImage extends Image
+{
+    protected $view = 'admin.form_custom.cut-image';
+
+    /**
+     * Allow to sort files.
+     *
+     * @param  bool  $value
+     * @return $this
+     */
+    public function sortable(bool $value = true)
+    {
+        $this->options['sortable'] = $value;
+
+        return $this;
+    }
+
+    /*
+     * 裁剪比例 格式：1/1
+     */
+    public function aspectRatio(float $value = 1)
+    {
+        $this->options['aspectRatio'] = $value;
+
+        return $this;
+    }
+
+    /**
+     * Set a limit of files.
+     *
+     * @param  int  $limit
+     * @return $this
+     */
+    public function limit(int $limit)
+    {
+        if ($limit < 2) {
+            return $this;
+        }
+
+        $this->options['fileNumLimit'] = $limit;
+
+        return $this;
+    }
+
+    /**
+     * Prepare for saving.
+     *
+     * @param  string|array  $file
+     * @return array
+     */
+    protected function prepareInputValue($file)
+    {
+        if ($path = request(static::FILE_DELETE_FLAG)) {
+            $this->deleteFile($path);
+
+            return array_values(array_diff($this->original, [$path]));
+        }
+
+        $file = Helper::array($file, true);
+
+        $this->destroyIfChanged($file);
+
+        return $file;
+    }
+
+    protected function forceOptions()
+    {
+    }
+}

lang/en/admin.php

@@ -257,4 +257,5 @@ return [
     'template_list' => 'Template List',
     'inquiry_list' => 'Inquiry List',
     'banner_list' => 'Banner List',
+    'crop_the_image' => 'Crop the Image',
 ];

lang/zh_CN/admin.php

@@ -258,4 +258,5 @@ return [
     'banner_list' => '轮播图列表',
     'landing_page' => '独立页',
     'messages' => '消息',
+    'crop_the_image' => '裁剪图片'
 ];

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

@@ -0,0 +1,214 @@
+<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>

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

@@ -0,0 +1,214 @@
+<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>