图片上传裁剪问题

项目内部碰见一个需要上传头像的一个模块，碰见好多问题。

1.首当其冲，老问题，兼容性问题，现在好多插件处理图片插件不支持ie7.8.9

2.文件路径问题，各大浏览器都不太一样，谷歌基本拿到放进去就可以展示。ie7.8.9不行。Safari浏览器也不太一样。懵逼五分钟。。。。

3.最稳定的办法，前端上传一张图片=>跟着图片传进去六个点=>后台进行裁剪=>存数据库=>传给前端=>展示到界面上；ok完美绕过了兼容问题，但是很麻烦。

然后找到一种只兼容ie10,11,chrom,safar,open,frefox这几个浏览器的方式。介意勿选；

http://www.jq22.com/jquery-info18167  //jquery插件库内部的插件

okay这个插件内部代码面没有什么难度，然后有个图片上传后台，复杂死囧囧囧囧囧囧。。。。OK上代码。。

function submitImg(fd){
                $.ajax({
                    type: "post",
                    url: "index.php?act=applets&op=image_upload_grzx",
                    data:{img:fd},
                    success:function(data) {
                        var obj_data=JSON.parse(data)
                         console.log(obj_data)
                        if(obj_data.state=='1'){
                            console.log('头像上传成功')
                            // $("#finalImg").removeAttr("src");
                            // $("#finalImg1").removeAttr("src");
                            $("#finalImg").attr("src",obj_data.src) 
                            $("#finalImg1").attr("src",obj_data.src)
                            $("#member_avatar_header").attr("src",obj_data.src)
                            $("input[name='imgIcon']").val(obj_data.src)
                           
                            // setTimeout(function(){
                            //     window.location.reload();//刷新当前页面.
                            // },3000)
                        }else{
                            console.log('头像上传失败')
                        }
                    },
                    error:function(err) {
                        console.log("上传失败");
                        return false
                    }
                });
    }

 //裁剪后的处理
 $("#sureCut").on("click",function () {
     if ($("#tailoringImg").attr("src") == null ){
         return false;
     }else{
         var cas = $('#tailoringImg').cropper('getCroppedCanvas')//获取被裁剪后的canvas
         var base64url = cas.toDataURL('image/jpeg')//转换为base64地址形式
         // $("#finalImg").prop("src",base64url)//显示为图片的形式
　　　　　　var fd = new FormData()
　　　　　　submitImg(base64url)
         layer.msg('头像上传成功', {icon: 6})
         //关闭裁剪框
         closeTailor();
     }
 });

====================================php=========================================

/**
     *  ajax 图片上传处理
     *  上传个人中心的图片
     */
    public function image_upload_grzxOp()
    {   
        if(empty($_SESSION['member_id'])){
            ajaxHintInfo('非法请求,请您登录后,再来');die;
        }else{
            $member_id=$_SESSION['member_id'];
        }

        $img=getPOST('img');
         //$img为传入字符串
        $img = str_replace('data:image/jpeg;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $imgPath=BASE_ROOT_PATH.'/'.DIR_UPLOAD.'/'.DIR_SHOP.'/'.'avatar'.'/'.'avatar_'.$member_id.'.jpeg';
        // $imgPath=BASE_ROOT_PATH.'/'.DIR_UPLOAD."test.png";
        if(@file_exists($imgPath)){
            @unlink($imgPath);
        }@clearstatcache();
        $fp=fopen($imgPath,'w');
        if(fwrite($fp,$data)){
            //存图片路径到数据库
            $updateMember=Model('member');
            $param['member_avatar']='avatar_'.$member_id.'.jpeg';
            if($updateMember->updateMember($param,$member_id)){
                $msg['state']='1';
                $msg['msg']='update,success';
                $msg['src']='/data/upload/shop/avatar'.'/'.'avatar_'.$_SESSION['member_id'].'.jpeg';
            }else{
                $msg['state']='0';
                $msg['msg']='update,fail';
            }
        }else{
             $msg['state']='0';
             $msg['msg']='update,fail1';
        }
        fclose($fp);
        ajaxHintInfo($msg);
    }

    public function image_sOp()
    {
        $img = getPOST("imgIcon");

        echo json_encode($img);
    }


}

　　okay