今天实现了图片裁剪上传的功能，写下这篇blog，预防以后忘记
cropper插件介绍
我们可以使用 cropper插件实现裁切和缩略图功能
下载地址为：https://github.com/fengyuanchen/cropper
cropper插件使用
准备
解压下载下来的压缩包
并把dist目录下的：cropper.min.js和cropper.min.css文件复制到项目目录下
引入类库
<!--使用绝对路径引入类库，因为cropper是基于jquery的，所以jquery也要引入-->
<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" href="/css/cropper.min.css">
<script src="/js/cropper.min.js"></script>
html结构
<form action="{{ route('setface') }}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-div">
<input type="file" name="face">
</div>
<!-- 预览图片区域 -->
<div class="img-container">
<img id="pre_image">
</div>
<!-- 三个缩略图预区域 -->
<div class="docs-preview clearfix">
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
</div>
<!-- 保存裁切参数的四个框 -->
<input type="hidden" name="x">
<input type="hidden" name="y">
<input type="hidden" name="w">
<input type="hidden" name="h">
<div class="form-div">
<input type="submit" value="确认">
</div>
</form>
样式文件
<!--在头部把样式文件导入，也可以自己修改样式控制裁剪框-->
<style>
.img-container {
width: 240px;
height: 240px;
float:left;
}
.img-container #pre_image {
width: 100%;
}
.img-preview {
float: left;
overflow: hidden;
margin-left: 20px;
}
.preview-lg {
width: 240px;
height: 240px;
}
.preview-md {
width: 80px;
height: 80px;
}
.preview-sm {
width: 35px;
height: 35px;
}
</style>
js代码
<script>
var preImg = $("#pre_image");
// 获取裁切时的四个框
var x = $("input[name=x]");
var y = $("input[name=y]");
var w = $("input[name=w]");
var h = $("input[name=h]");
// 选择图片时预览图片 并 调用cropper插件
$("input[name=face]").change(function(){
// 先消毁，清除一下插件，否则连续调用插件时会失败
preImg.cropper("destroy");
// this.files[0]：获取当前图片并转成URL地址
var url = getObjectUrl( this.files[0] );
console.log( url )
// 设置url到预览图片上
preImg.attr('src', url);
// 调出插件
preImg.cropper({
aspectRatio: 1, // 裁切的框形状
preview:'.img-preview', // 显示预览的位置
viewMode:3, // 显示模式：图片不能无限缩小，但可以放大
// 裁切时把参数保存到表单中
crop: function(event) {
x.val( event.detail.x );
y.val( event.detail.y );
w.val( event.detail.width );
h.val( event.detail.height );
}
});
});
// 预览时需要使用下面这个函数转换一下
function getObjectUrl(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
}
</script>
后端保存图片到数据库
创建迁移文件
<!--为用户表表添加三个字段，用来保存三张缩略图-->
php artisan make:migration add_faces_users --table=users
编写迁移文件
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class AddFacesUsers extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('bgface')->nullable()->comment('大脸');
$table->string('mdface')->nullable()->comment('中脸');
$table->string('smface')->nullable()->comment('小脸');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn(['bgface','mdface','smface']);
});
}
}
执行迁移
php artisan migrate
创建表单验证类
创建验证类文件
php artisan make:request FaceRequest
编写验证规则
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class FaceRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
<!--最大上传大小不能超过4m-->
'face' => 'required|image|max:4096',
'x' => 'required|numeric|min:0',
'y' => 'required|numeric|min:0',
'w' => 'required|numeric|min:200',
'h' => 'required|numeric|min:200',
];
}
}
配置路由
<!--配置一个用来处理头像的路由-->
//修改头像
Route::post("/face",'FaceController@face')->name('setface');
FaceController中添加处理头像的代码
<!--使用composer安装图片处理类-->
composer require intervention/image
<!--修改 config/app.php ，注册类到 $providers 数组-->
Intervention\Image\ImageServiceProvider::class
<!--在 $alias 数组中定义类别名-->
'Image'=> Intervention\Image\Facades\Image::class
<!--引入相关类-->
use Image;
use App\Models\User;
use Storage;
use App\Http\Requests\FaceRequest;
<!--添加face方法-->
public function face(FaceRequest $req) {
if($req->has('face') && $req->face->isValid())
{
// 当前图片上传的位置
$oldimage = $req->face->path();
// 保存原图片
// 获取当前日期
$date = date('Ymd');
$oriImg = $req->face->store('face/'.$date);
// 打开要处理的图片
$img = Image::make($oldimage);
// 裁切图片
$img->crop((int)$req->w,(int)$req->h,(int)$req->x,(int)$req->y);
// 生成缩略图并保存
// 拼出这个缩略图的名字
$bgname = str_replace('face/'.$date.'/', 'face/'.$date.'/bg_', $oriImg);
$img->resize(240,240);
$img->save('./uploads/'.$bgname);
$mdname = str_replace('face/'.$date.'/', 'face/'.$date.'/md_', $oriImg);
$img->resize(80,80);
$img->save('./uploads/'.$mdname);
$smname = str_replace('face/'.$date.'/', 'face/'.$date.'/sm_', $oriImg);
$img->resize(35,35);
$img->save('./uploads/'.$smname);
// 先取出用户的信息
$user = User::find( session('id') );
// 删除原头像
Storage::delete( $user->face );
Storage::delete( $user->bgface );
Storage::delete( $user->mdface );
Storage::delete( $user->smface );
// 更新新脸
$user->face = $oriImg;
$user->bgface = $bgname;
$user->mdface = $mdname;
$user->smface = $smname;
$user->save();
// 修改SESSION中的图片
session([
'smface' => $smname,
'bgface' => $bgname,
]);
return redirect()->route('face');
}
}
注意事项
- 数据库字段要对应正确，不然保存数据库会失败
- 因为新的头像要保存到session中，所以如果没效果要多清空缓存试试
- 最重要的是一定要有耐心
- 注意一下文件的上传大小
- 有问题请给我发邮件
