azizyus / image-manager
1.13
2024-01-06 22:05 UTC
Requires
- intervention/image: ^2.6
Requires (Dev)
- laravel/framework: ^7.29
README
此软件包能做什么?
- 上传图片(拖放或直接从窗口选择)
- 通过拖放排序图片
- 可以创建和维护特定变体图像(可以重新创建)
- 裁剪图像和变体
- 从已上传的图像中选择变体
- 从上传的图像中定义变体和特定图像,如“缩略图”或“封面”
- 可能实现模型附件和查询限制
- 可以从URL导入图像,其行为与正常上传的文件相同
安装
composer require azizyus/image-manager ^1.0
添加到您的config/app.php
\Azizyus\ImageManager\ImageManagerServiceProvider::class,
php artisan migrate
php artisan vendor:publish --tag=managed-images
NPM 依赖
"bootstrap-vue": "^2.21.2",
"vue-cropperjs": "^4.2.0",
"vuedraggable": "^2.24.3"
示例
控制器
public function listing()
{
$user = User::with('allImages','thumbnailImage','coverImage')->first();
$data = [
'images' => $user->allImages->map(function ($f){return $f->map();}),
'thumbnailImage' => $user->thumbnailImage->map(),
'coverImage' => $user->coverImage->map(),
];
//dd($data['coverImage'],$data['thumbnailImage'],$data['images'][0]);
return view('listing')->with($data);
}
public function index()
{
ImageManager::setUploadUrl(route('image.upload'));
ImageManager::setFilesUrl(route('image.files'));
return view('uploader');
}
public static function chooseSpecialImage(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::chooseSpecialImage($request);
});
}
public static function specialImages(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::specialImages($request);
});
}
public function upload(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::upload($request);
});
}
public function delete(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::deleteFile($request);
});
}
public function sort(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::setSort($request);
});
}
public function crop(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::cropImage($request);
});
}
public function remote(Request $request)
{
$user = User::first();
return ImageManager::withModel($user,function()use($request){
return ImageManager::importFromUrl($request);
});
}
public function files()
{
$user = User::first();
return ImageManager::withModel($user,function(){
return ImageManager::getFiles();
});
}
路由
Route::get('uploader','UploadController@index')->name('image.index');
Route::any('specialImages','UploadController@specialImages')->name('image.specialImages');
Route::any('chooseSpecialImage','UploadController@chooseSpecialImage')->name('image.chooseSpecialImage');
Route::any('upload','UploadController@upload')->name('image.upload');
Route::any('listing','UploadController@listing')->name('image.listing');
Route::any('sort','UploadController@sort')->name('image.sort');
Route::any('remote','UploadController@remote')->name('image.remote');
Route::any('delete','UploadController@delete')->name('image.delete');
Route::any('crop','UploadController@crop')->name('image.crop');
Route::any('files','UploadController@files')->name('image.files');
路由附件
$this->app->singleton('imageManager',function(){
$s = new Manager(Storage::disk('public'));
$s->setDeleteUrl('/delete');
$s->setUploadUrl('/upload');
$s->setFilesUrl('/files');
$s->setSortUrl('/sort');
$s->setCropFilesUrl('/crop');
$s->setRemoteUrlUploadUrl('/remote');
$s->setSpecialImagesUrl('/specialImages');
$s->setChooseSpecialImageUrl('/chooseSpecialImage');
return $s;
});
变体定义
ImageManager::defineSpecialImage('thumbnail',150,150); //choose thumbnail from uploaded images
ImageManager::defineSpecialImage('cover',150,150); //choose thumbnail from uploaded images
ImageManager::defineVariation('sliderListingImage',75,75,'gallery'); //generate variation for uploaded images except special ones
预定义组件名称
Vue.component('wrapper',require('./components/Wrapper.vue').default)
Vue.component('ImageFileBox',require('./components/ImageFileBox').default);
Vue.use(require('vuedraggable'))
Vue.use(require('bootstrap-vue'));
预定义 Vue 组件
使用此功能构建您视图的组件
{!! \Azizyus\ImageManager\VueGeneration\VueComponentBuilder::build(imageManager()) !!}
重新生成变体
在您定义新内容时很有用 php artisan imagemanager:generate:variations