Skip to content

Commit 2e07ca0

Browse files
EVA09EVA09
committed
更新多语言支持，修复hasMany问题，逻辑代码更新。
1 parent 1a284b5 commit 2e07ca0

File tree

7 files changed

+216
-174
lines changed

7 files changed

+216
-174
lines changed

‎README.md‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ cropper extension for laravel-admin
33

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

6+
现在 支持hasMany操作了~，但是hasMany内存在图片冗余问题！这貌似是个底层问题，当然推荐大家在使用hasMany的时候自行维护图片状态。
7+
68
## 截图
79

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

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

2123
## 配置
@@ -31,9 +33,20 @@ php artisan vendor:publish --tag=laravel-admin-cropper
3133
'enable' => true,
3234
]
3335
]
34-
3536
```
36-
37+
同时记住必须要配置基础的disks配置，`config/filesystems.php`内添加一项`disk`：
38+
```
39+
'disks' => [
40+
... ,
41+
// 配置目录可以自己定义
42+
'admin' => [
43+
'driver' => 'local',
44+
'root' => public_path('uploads'),
45+
'visibility' => 'public',
46+
'url' => env('APP_URL').'/uploads',
47+
],
48+
],
49+
```
3750

3851
## 使用
3952

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

5568
4、扩展继承了laravel-admin 的ImageField类 和File类。
5669
所以你不必去纠结图片的修改 和删除问题。他们都是自动操作的。
57-
当然，因为继承了ImageField类，所以也能使用 “intervention/image” 的各种(crop,fit,insert)方法
58-
（前提是你已经composer require intervention/image）
70+
当然，因为继承了ImageField类，所以也能使用 `intervention/image` 的各种(crop,fit,insert)方法
71+
（前提是你已经`composer require intervention/image`）
72+
73+
5、现在终于支持hasMany了！！！！同时修复了之前的各种逻辑bug，并且支持本地化翻译，翻译文件发布后位于`resources\lang\zh-CN\admin_cropper.php`，目前支持了中英两种语言，可以自己选择增加别的语言支持。
74+
75+
6、比较糟糕的问题，因为admin框架底层的改动，现在删除条目不会自动删除图片了（代码没读完，和插件本身应该没关系，因为删除条目的时候完全不会调用插件代码，这我也没办法了）
76+
77+
7、未来的更新，将会替换使用框架内提供的sweetalert2 来替换目前 layer以减少前端负担。
5978

6079
License
6180
------------

‎resources/assets/cropper.min.css‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,33 @@
66
* Released under the MIT license
77
*
88
* Date: 2018-06-01T15:18:09.891Z
9-
*/.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}
9+
*/.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}
10+
/* 插件按钮等样式 */
11+
.cropper-img{
12+
max-width: 300px;
13+
max-height: 300px;
14+
border: 1px solid #ddd;
15+
box-shadow: 1px 1px 5px 0 #a2958a;
16+
padding: 6px;
17+
float: left;
18+
clear: both;
19+
margin-top: 5px;
20+
cursor: pointer;
21+
}
22+
.cropper-btn{
23+
margin-bottom: 10px;
24+
}
25+
.cropper-file{
26+
display: none !important;
27+
}
28+
.cropper-input{
29+
opacity: 0;
30+
}
31+
#cropping-img{
32+
max-width: 100%;
33+
}
34+
#cropping-div{
35+
width: 98%;
36+
height: 98%;
37+
margin: 0 auto;
38+
}

‎resources/lang/en/admin_cropper.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?php
2+
3+
return [
4+
'choose' => 'Select Cropper',
5+
'title' => 'Image Cropper',
6+
'done' => 'Crop',
7+
'origin' => 'Origin',
8+
'clear' => 'Clear',
9+
];

‎resources/lang/zh-CN/admin_cropper.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?php
2+
3+
return [
4+
'choose' => '选择要剪裁的图片',
5+
'title' => '图片剪裁器',
6+
'done' => '剪裁',
7+
'origin' => '原图',
8+
'clear' => '清空',
9+
];

‎resources/views/cropper.blade.php‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,15 @@
1-
<style>
2-
.cropper-img{
3-
max-width: 300px;
4-
max-height: 300px;
5-
border: 1px solid #ddd;
6-
box-shadow: 1px 1px 5px 0 #a2958a;
7-
padding: 6px;
8-
float: left;
9-
clear: both;
10-
}
11-
.cropper-btn{
12-
margin-bottom: 10px;
13-
}
14-
.cropper-file{
15-
display: none !important;
16-
}
17-
#cropping-img{
18-
max-width: 100%;
19-
}
20-
#cropping-div{
21-
width: 98%;
22-
height: 98%;
23-
margin: 0 auto;
24-
}
25-
</style>
261
<div class="{{$viewClass['form-group']}} {!! !$errors->has($errorKey) ? '' : 'has-error' !!}">
27-
282
<label for="{{$id}}" class="{{$viewClass['label']}} control-label">{{$label}}</label>
29-
303
<div class="{{$viewClass['field']}}">
314

325
@include('admin::form.error')
33-
<div data-id="{{$id}}" class="btn btn-info pull-left cropper-btn">浏览</div>
34-
<input id="{{$id}}-file" {!! $attributes !!} data-id="{{$id}}" class="cropper-file" type="file" accept="image/*"/>
35-
<img id="{{$id}}-img" {!! $attributes !!} data-id="{{$id}}" class="cropper-img" {!! empty($value) ? '' : 'src="'.old($column, $value).'"' !!}>
36-
<input id="{{$id}}-input" type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" {!! $attributes !!} />
37-
6+
<div class="btn btn-info pull-left cropper-btn">{{ trans('admin_cropper.choose') }}</div>
387
@include('admin::form.help-block')
39-
8+
<input class="cropper-file" type="file" accept="image/*"/>
9+
<!-- <img class="cropper-img" {!! empty($value) ? '' : 'src="'.old($column, $value).'"' !!}> -->
10+
<img class="cropper-img" {!! empty($value) ? '' : 'src="'.$preview.'"' !!}>
11+
<input class="cropper-input" name="{{$name}}" value="{{ old($column, $value) }}" {!! $attributes !!} />
12+
4013
</div>
4114
</div>
4215

0 commit comments

Comments
 (0)