Laravel5使用jQuery-photoClip图片裁剪插件完成图片裁剪功能

发布时间:2017-05-04 编辑:小张个人博客 查看次数:3727

Laravel5使用jQuery图片裁剪插件jQuery-photoClip完成图片裁剪功能,jQuery-photoClip是一款支持移动设备触摸手势的jQuery图片裁剪插件。该图片裁剪插件在移动设备上可以使用手指来进行各种操作,如缩放、旋转等,同时在桌面设备中也提供了相应的方法来操作,是一款非常不错的图片裁剪插件。

jQuery-photoClip兼容

IE10及以上版本,Chrome、Firefox、Safari、Android、微信等主流先进浏览器

jQuery-photoClip下载

https://github.com/baijunjie/PhotoClip.js

jQuery-photoClip依赖插件

iscroll-zoom.js(https://github.com/cubiq/iscroll)   
hammer.js(https://github.com/hammerjs/hammer.js)  
lrz.all.bundle.js(https://github.com/think2011/localResizeIMG)

在页面中引入jQuery和jQuery-photoClip插件所依赖的外部插件文件

<script src="{{url('Home/js/jquery.min.js')}}"></script>
<script src="{{url('Home/PhotoClip/js/iscroll-zoom.js')}}"></script>  <!--实现图片的移动-->
<script src="{{url('Home/PhotoClip/js/hammer.min.js')}}"></script>
<script src="{{url('Home/PhotoClip/js/lrz.all.bundle.js')}}"></script>
<script src="{{url('Home/PhotoClip/js/PhotoClip.js')}}"></script>  <!--实现图片的剪裁-->

jQuery-photoClip基本使用案例演示

CSS样式:
<style>
#clipArea {
    float: left;
    margin-top:20px;
    margin-bottom: 30px;
    height: 300px;
    width:300px;
}
#view {
    margin-left: 100px;
    margin-top:80px;
    float: left;
    width: 200px;
    height: 200px;
    background-color: #666;
}
.button{
    width: 400px;
}
</style>
<!---图片选择框和图片剪裁后预览---->
<div id="clipArea"></div>
<div id="view"></div>
<div class="button">
    <input type="file" id="file">
    <button id="clipBtn">截取</button>
</div>

<!--------jQuery-photoClip调用--------->
<script>
  var pc = new PhotoClip('#clipArea', {
    size: [200, 200],   //剪裁完成的图片height,width
    outputSize: [200, 200], //剪裁框的height,width
    file: "#file",     //文件上传框ID
    view: "#view",     //预览div的ID
    ok: "#clipBtn",    //剪裁开始按钮ID
    outputType:'jpg', //指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"。
    //img: 'img/mm.jpg',
    loadStart: function() {
        console.log('开始读取照片');
    },
    loadComplete: function() {
        console.log('照片读取完成');
    },
    done: function(dataURL) {
        console.log(dataURL);   //剪裁完成后返回的base64.可以直接上传至服务器。
        $.ajax({
            type: "POST",
            url: '{{url('DataPhoto')}}',
            dataType: 'json',
            data: { img: dataURL, _token: "{{csrf_token()}}"},
            success: function(msg) {
                if(msg.state == 1){
                    alert(msg.msg);
                }else{
                    alert(msg.msg);
                }
            }
        });
    },
    fail: function(msg) {
        alert(msg);
    }
});
</script>

jQuery-photoClip基本使用

laravel图片处理逻辑

首先判断图片是否为空,如果为空则返回提示信息。我这里是按日期创建图片保存目录。。。

// 接收图片数据
public function DataPhoto(Request $request){
    $img = $request ->input('img','');
    if($img == ''){
        return json_encode(['state' =>0 ,'msg'=> '请选择图片!']);
    }
     // 匹配出图片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/',$img, $result)){
       // 图片后缀
        $type = $result[2];
        // 生成图片路径,按日期生成目录
        $img_path = public_path().'/uploads/'.date('Y-m-d');
        //判断目录存在否,不存在则创建目录
        if(!is_dir($img_path)){
            // iconv防止中文目录乱码
            if(!mkdir(iconv("UTF-8", "GBK",$img_path),0777,true)){
               return json_encode(['state' =>0 ,'msg'=> '目录创建失败,请检查相关设置!']);
            }
        }
        // 图片保存及命名
        $new_file = $img_path.'/'.date('YmdHis').mt_rand(100,999).".{$type}";
        // 判断保存图片是否成功
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $img)))){
            return json_encode(['state' => 1,'msg'=>'图片保存成功!']);
        }else{
            return json_encode(['state' => 0,'msg'=>'图片保存失败,请重试!']);
        }
    }
}

Laravel5 jQuery-photoClip基本使用

Laravel5使用jQuery图片裁剪插件jQuery-photoClip完成图片裁剪功能到这基本上完成了,如果用到实际项目中的话,请根据自己的开发环境和业务需求来设置相关文件,保存上传图片信息到数据库中方便使用,我这里为了方便测试没有保存数据信息。希望这篇《Laravel5使用jQuery-photoClip图片裁剪插件完成图片裁剪功能》对你有所帮助!

出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号