Skip to content

Commit

Permalink
更新多语言支持,修复hasMany问题,逻辑代码更新。
Browse files Browse the repository at this point in the history
  • Loading branch information
EVA09 committed Apr 14, 2020
1 parent 1a284b5 commit 2e07ca0
Show file tree
Hide file tree
Showing 7 changed files with 216 additions and 174 deletions.
31 changes: 25 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ cropper extension for laravel-admin

这是一个`laravel-admin`扩展,用来将`cropper`集成进`laravel-admin`的表单中

现在 支持hasMany操作了~,但是hasMany内存在图片冗余问题!这貌似是个底层问题,当然推荐大家在使用hasMany的时候自行维护图片状态。

## 截图

![](./demo.jpg)
Expand All @@ -13,9 +15,9 @@ cropper extension for laravel-admin
composer require laravel-admin-ext/cropper
```

然后
然后使用artisan 命令发布资源
```bash
php artisan vendor:publish --tag=laravel-admin-cropper
php artisan vendor:publish --provider='Encore\Cropper\CropperServiceProvider' --force
```

## 配置
Expand All @@ -31,9 +33,20 @@ php artisan vendor:publish --tag=laravel-admin-cropper
'enable' => true,
]
]

```

同时记住必须要配置基础的disks配置,`config/filesystems.php`内添加一项`disk`
```
'disks' => [
... ,
// 配置目录可以自己定义
'admin' => [
'driver' => 'local',
'root' => public_path('uploads'),
'visibility' => 'public',
'url' => env('APP_URL').'/uploads',
],
],
```

## 使用

Expand All @@ -54,8 +67,14 @@ $form->cropper('content','label')->cRatio($width,$height);

4、扩展继承了laravel-admin 的ImageField类 和File类。
所以你不必去纠结图片的修改 和删除问题。他们都是自动操作的。
当然,因为继承了ImageField类,所以也能使用 “intervention/image” 的各种(crop,fit,insert)方法
(前提是你已经composer require intervention/image)
当然,因为继承了ImageField类,所以也能使用 `intervention/image` 的各种(crop,fit,insert)方法
(前提是你已经`composer require intervention/image`

5、现在终于支持hasMany了!!!!同时修复了之前的各种逻辑bug,并且支持本地化翻译,翻译文件发布后位于`resources\lang\zh-CN\admin_cropper.php`,目前支持了中英两种语言,可以自己选择增加别的语言支持。

6、比较糟糕的问题,因为admin框架底层的改动,现在删除条目不会自动删除图片了(代码没读完,和插件本身应该没关系,因为删除条目的时候完全不会调用插件代码,这我也没办法了)

7、未来的更新,将会替换使用框架内提供的sweetalert2 来替换目前 layer以减少前端负担。

License
------------
Expand Down
31 changes: 30 additions & 1 deletion resources/assets/cropper.min.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,33 @@
* Released under the MIT license
*
* Date: 2018-06-01T15:18:09.891Z
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/* 插件按钮等样式 */
.cropper-img{
max-width: 300px;
max-height: 300px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px 0 #a2958a;
padding: 6px;
float: left;
clear: both;
margin-top: 5px;
cursor: pointer;
}
.cropper-btn{
margin-bottom: 10px;
}
.cropper-file{
display: none !important;
}
.cropper-input{
opacity: 0;
}
#cropping-img{
max-width: 100%;
}
#cropping-div{
width: 98%;
height: 98%;
margin: 0 auto;
}
9 changes: 9 additions & 0 deletions resources/lang/en/admin_cropper.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?php

return [
'choose' => 'Select Cropper',
'title' => 'Image Cropper',
'done' => 'Crop',
'origin' => 'Origin',
'clear' => 'Clear',
];
9 changes: 9 additions & 0 deletions resources/lang/zh-CN/admin_cropper.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?php

return [
'choose' => '选择要剪裁的图片',
'title' => '图片剪裁器',
'done' => '剪裁',
'origin' => '原图',
'clear' => '清空',
];
39 changes: 6 additions & 33 deletions resources/views/cropper.blade.php
Original file line number Diff line number Diff line change
@@ -1,42 +1,15 @@
<style>
.cropper-img{
max-width: 300px;
max-height: 300px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px 0 #a2958a;
padding: 6px;
float: left;
clear: both;
}
.cropper-btn{
margin-bottom: 10px;
}
.cropper-file{
display: none !important;
}
#cropping-img{
max-width: 100%;
}
#cropping-div{
width: 98%;
height: 98%;
margin: 0 auto;
}
</style>
<div class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">

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

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

@include('admin::form.error')
<div data-id="{{$id}}" class="btn btn-info pull-left cropper-btn">浏览</div>
<input id="{{$id}}-file" {!! $attributes !!} data-id="{{$id}}" class="cropper-file" type="file" accept="image/*"/>
<img id="{{$id}}-img" {!! $attributes !!} data-id="{{$id}}" class="cropper-img" {!! empty($value) ? '' : 'src="'.old($column, $value).'"' !!}>
<input id="{{$id}}-input" type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" {!! $attributes !!} />

<div class="btn btn-info pull-left cropper-btn">{{ trans('admin_cropper.choose') }}</div>
@include('admin::form.help-block')

<input class="cropper-file" type="file" accept="image/*"/>
<!-- <img class="cropper-img" {!! empty($value) ? '' : 'src="'.old($column, $value).'"' !!}> -->
<img class="cropper-img" {!! empty($value) ? '' : 'src="'.$preview.'"' !!}>
<input class="cropper-input" name="{{$name}}" value="{{ old($column, $value) }}" {!! $attributes !!} />

</div>
</div>

Loading

0 comments on commit 2e07ca0

Please sign in to comment.