cropper.js插件再tp5thinkphp5下的裁剪头像并上传的实例

cropper.js插件再tp5thinkphp5下的裁剪头像并上传的实例 绝对详细实用

包含了图片上传，裁剪，保存，修改数据库等功能

最近项目上用到了！才好好的整理了一下！

好了  废话不多说，直接看代码

{extend name="public/base" /}


{block name="title"}修改头像{/block}


{block name="main"}

{notempty name="error_msg"}
{$error_msg}
{/notempty}
    
    
    



        

            

                原头像：

                
            
            

                选 择
                
                支持的图片类型: JPG, PNG

            
            

                

                    
                
                

                    

                        

                            
                        
                    
                    
210*210
                
                

                    

                        

                            
                        
                    
                    
48*48
                    

                        

                            
                        
                    
                    
20*20
                
            

            
            
            
            
            保 存
            

            

            1选择图片->2裁剪图片->3保存图片
        


    



{/block}






{block name="footer"}
{__block__}

{/block}

=================================以上是前台html代码===============================

=================================下面是后台PHP代码================================

public function headimgurl()
    {
        if(Request::instance()->isPost()){
            $d = Request::instance()->post();
            $data = Request::instance()->file();
            $file = request()->file('avatar');
            // 移动到框架应用根目录/public/uploads/ 目录下
            if($file){
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                if($info){
                    // 成功上传后 获取上传信息
                    // 输出 jpg
                    //echo $info->getExtension();
                    // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                    //echo $info->getSaveName();
                    // 输出 42a79759f284b767dfcb2a0197904287.jpg
                    //echo $info->getFilename();
                    $path = 'public/uploads/'.$info->getSaveName();
                    $image = \think\Image::open($path);
                    // 支持从某个坐标开始裁剪，例如下面从（100，30）开始裁剪
                    $image->crop($d['w'], $d['h'],$d['x'],$d['y'])->save($path);
                    $data['code'] = 1;
                    $data['msg'] = "上传成功";
                    $data['data'] = '/'.$path;

                    $res = Db::name('qudonghao_user')->where(['id'=>Session::get('userinfo.id')])->update(['headimgurl'=>$path]);
                    Session::set('userinfo.headimgurl',$path);
                    if($res){
                        show_msg('修改成功，请刷新页面查看效果');
                    }else{
                        show_msg('修改失败');
                    }
                }else{
                    // 上传失败获取错误信息
                    //echo $file->getError();
                    show_msg('上传失败，请重试');
                }
            }
        }else{
            return $this->fetch();
        }
    }

namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Request;
use think\Session;

好了，教程就到这里，具体样式什么的我都是使用的默认的！大家下载 cropper.js 可以到

http://elemefe.github.io/image-cropper/#demo

去下载