一、下载安装
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', // 预览图的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) {
// 当改变剪裁容器或图片时的事件函数。
//获取位置数据
$('#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);
// 裁剪区域长和高
console.log(data.width);
console.log(data.height);
//旋转角度
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添加监听
$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属性再重新创建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){
/*裁剪后得到这个图片*/
// 裁剪后将图片放到指定标签
$target.attr('src',URL.createObjectURL(blob));
});
});
//旋转按钮
$('#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">裁剪预览</button>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<p>预览效果:</p>
{{--预览效果这里的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>
{{--预览效果end--}}
<div >
<p>裁剪结果:</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){
//防止重复提交
$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());
// 更新数据库图片名称
User_Data::Where('user_id',$request->all()['user_data_img'])->update(["headimg" => $imgname]);
}else{
//否则抛http异常，跳转到403页面
flash("不能重复提交",'error');
}
return view('component.headimg');
}
2、仓库代码(这里重要接受图片数据并且保存然后返回图面路径和名字)
// 上传图片
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编码转换为图片保存、、
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)) {
//检查是否有该文件夹，如果没有就创建，并给予最高权限
mkdir($new_file, 0700);
}
$imgname="img".time() . ".{$type}";
$new_file = $new_file . $imgname;
//将图片保存到指定的位置base64_decode把base64进行解码file_put_contents把字符串新到文件里面没有文件就从新创建一个
if (file_put_contents($new_file, base64_decode(str_replace($result[1],'', $base64_image_content)))) {
// 删除以前的图像用Storage::delete()修改了filesystems文件的默认路径
if(Storage::delete($img['past_img'])){
flash("上传成功",'success');
}
//保存成功返回这个相对路径和图片名字
return '/backend/images/uploads/'.$imgname;
}else{
return 'false';
}
}else{
return 'false';
}
}
}
网友评论