一员舵、下載安裝
github下載地址https://github.com/fengyuanchen/cropperjs
引用：
<!-- jQuery -->
<script src="{{ asset('/backend/vendors/jquery/dist/jquery.min.js')}}"></script>
{{--cropper-cs--}}
<link href="{{asset('/backend/myvebdors/cropper-master/dist/cropper.min.css')}}" rel="stylesheet">
{{--cropperjs--}}
<script src="{{asset('/backend/myvebdors/cropper-master/dist/cropper.min.js')}}"></script>
二、js定義類（初始化和按鈕事件）
* 圖片剪切js
*/
var headimg = function () {
var headimgInit = function () {
//圖片
var $image = $('#image');
// 打開圖片按鈕
var $photoInput = $('#photoInput');
//裁剪后的圖片
var $imageinfo ;
// 初始化這個核心方法修改自官方demo的js
var initCropper = function (img, input){
var $image = img;
var options = {
aspectRatio: 1/1, // 縱橫比
preview: '.img-preview', // 預(yù)覽圖的class名
minContainerWidth:300,
minContainerHeight:350,
minCanvasWidth:50,
minCanvasHeight:50,
};
$image.on({
'build.cropper': function (e) {
// console.log(e.type);
},
'built.cropper': function (e) {
// console.log(e.type);
},
'cropstart.cropper': function (e) {
// console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
// console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
// console.log(e.type, e.action);
},
'crop.cropper': function (data) {
// 當(dāng)改變剪裁容器或圖片時的事件函數(shù)藕畔。
//獲取位置數(shù)據(jù)
$('#imgdatax').html(data.x.toFixed(2));
$('#imgdatay').html(data.y.toFixed(2));
$('#imgdatawidth').html(data.width.toFixed(2));
$('#imgdataheight').html(data.height.toFixed(2));
/* //打印日志
//位置xy
console.log(data.x);
console.log(data.y);
// 裁剪區(qū)域長和高
console.log(data.width);
console.log(data.height);
//旋轉(zhuǎn)角度
console.log(data.rotate);
console.log(data.scaleX);
console.log(data.scaleY);*/
},
'zoom.cropper': function (e) {
// console.log(e.type, e.ratio);
},
}).cropper(options);
var $inputImage = input;
var uploadedImageURL;
if (URL) {
// 給input添加監(jiān)聽
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
// 判斷是否是圖像文件
if (/^image\/\w+$/.test(file.type)) {
// 如果URL已存在就先釋放
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
// 銷毀cropper后更改src屬性再重新創(chuàng)建cropper
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('請選擇一個圖像文件马僻！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
};
//上傳提交
$('#submitbtn').on('click',function () {
//獲取裁剪圖片的
$imageinfo = $image.cropper('getCroppedCanvas',{width:300, height:300}).toDataURL( );
//把圖片放到icon里面
$("#icon").val($imageinfo);
});
//裁剪保存按鈕
$('#btnimg').on('click',function (){
var $target = $('#result');
$image.cropper('getCroppedCanvas',{
width:300, // 裁剪的長寬
height:300
}).toBlob(function(blob){
/*裁剪后得到這個圖片*/
// 裁剪后將圖片放到指定標(biāo)簽
$target.attr('src',URL.createObjectURL(blob));
});
});
//旋轉(zhuǎn)按鈕
$('#rotate-Left').on('click',function (){
$image.cropper("rotate",-45);
});
$('#rotate-Right').on('click',function (){
$image.cropper("rotate",-45);
});
initCropper($image,$photoInput);
};
return {
init : headimgInit
}
}();
三、頁面定義
@section('css')
{{--剪切頭像css--}}
<style>
#image {
max-width: 100%;
}
.img-preview{
width: 150px;
height: 150px;
overflow: hidden;
}
button {
margin-top:10px;
}
#result {
width: 80px;
height: 80px;
}
</style>
@endsection
@section('content')
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>修改圖像</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="col-md-12 col-sm-12 col-xs-12">
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@include('flash::message')
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<label class="btn btn-danger pull-left" for="photoInput">
<input type="file" class="sr-only" id="photoInput" accept="image/*">
<span>打開圖片</span>
</label>
</div>
</div>
{{--剪切圖片核心--}}
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<img id="image" src="{{Auth::user()->getUserData->headimg}}" >
<div class="btn btn-group">
<button class="btn btn-danger" id="rotate-Left" ><i class="fa fa-rotate-left"></i> </button>
<button class="btn btn-danger" id="rotate-Right" ><span class="fa fa-rotate-right"></span> </button>
<button class="btn btn-danger" id="btnimg">裁剪預(yù)覽</button>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<p>預(yù)覽效果:</p>
{{--預(yù)覽效果這里的div必須是這樣的樣式才能顯示--}}
<div class="docs-preview clearfix">
<div class="img-preview preview-xs layui-circle"></div>
</div>
<P>x:<small id="imgdatax"></small> y:<small id="imgdatay"></small></P>
<P>寬度:<small id="imgdatawidth"></small>px 高度:<small id="imgdataheight"></small>px</P>
<br>
{{--預(yù)覽效果end--}}
<div >
<p>裁剪結(jié)果:</p>
<img class="layui-circle" src="{{Auth::user()->getUserData->headimg}}" id="result">
</div>
<br>
<div class="row">
<form id="submitForm" action="{{route('headimg')}}" method="post">
{{csrf_field()}}
<input type="hidden" name="user_data_img" id="user_data_img" value="{{Auth::user()->id}}"/>
<input type="hidden" name="past_img" id="past_img" value="{{Auth::user()->getUserData->headimg}}"/>
<input type="hidden" name="icon" id="icon"/>
<input class="btn btn-danger" type="submit" id="submitbtn" value="上傳圖像">
</form>
</div>
</div>
</div>
{{--剪切圖片核心end--}}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script src="{{ asset('/backend/js/home/headimg.js')}}"></script>
<script>
// 開始加載
$(function () {
headimg.init("{{route('headimg')}}","{{csrf_token()}}");
});
</script>
@endsection
四注服、控制器和倉庫的代碼
1韭邓、控制器的2個方法
public function showheadimg(Request $request){
//防止重復(fù)提交
$request->session()->put('register',time());
return view('component.headimg');
}
//頭像圖片修改
public function headimg(Request $request){
if($request->session()->has('register')){
//存在則表示是首次提交措近，清空session中的'register'
$request->session()->forget('register');
$imgname = $this->home->upimgage($request->all());
// 更新數(shù)據(jù)庫圖片名稱
User_Data::Where('user_id',$request->all()['user_data_img'])->update(["headimg" => $imgname]);
}else{
//否則拋http異常，跳轉(zhuǎn)到403頁面
flash("不能重復(fù)提交",'error');
}
return view('component.headimg');
}
2女淑、倉庫代碼(這里重要接受圖片數(shù)據(jù)并且保存然后返回圖面路徑和名字)
// 上傳圖片
public function upimgage($img){
if(empty($img)){
flash("上傳失敗",'error');
return view('admin.home.userdata');
}else{
header('Content-type:text/html;charset=utf-8');
$base64_image_content = $img['icon'];
//將base64編碼轉(zhuǎn)換為圖片保存瞭郑、、
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
//絕對路徑
$new_file = "".public_path()."/backend/images/uploads/";
if (!file_exists($new_file)) {
//檢查是否有該文件夾鸭你，如果沒有就創(chuàng)建屈张，并給予最高權(quán)限
mkdir($new_file, 0700);
}
$imgname="img".time() . ".{$type}";
$new_file = $new_file . $imgname;
//將圖片保存到指定的位置base64_decode把base64進(jìn)行解碼file_put_contents把字符串新到文件里面沒有文件就從新創(chuàng)建一個
if (file_put_contents($new_file, base64_decode(str_replace($result[1],'', $base64_image_content)))) {
// 刪除以前的圖像用Storage::delete()修改了filesystems文件的默認(rèn)路徑
if(Storage::delete($img['past_img'])){
flash("上傳成功",'success');
}
//保存成功返回這個相對路徑和圖片名字
return '/backend/images/uploads/'.$imgname;
}else{
return 'false';
}
}else{
return 'false';
}
}
}
