欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片上传裁剪问题

程序员文章站 2022-03-02 12:48:36
...

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

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