html5+exif.js+canvas+php实现手机上传图片,图片损坏无法打开

上传图片,图片损坏无法打开,图片路径也是正确的,

function selectFileImage(fileObj) {  
    var file = fileObj.files['0'];  
    //图片方向角 added by lzk  
    var Orientation = null;  
      
    if (file) {  
        console.log("正在上传,请稍后...");  
        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
        if (!rFilter.test(file.type)) {  
            //showMyTips("请选择jpeg、png格式的图片", false);  
            return;  
        }  
        // var URL = URL || webkitURL;  
        //获取照片方向角属性,用户旋转控制  
        EXIF.getData(file, function() {  
           // alert(EXIF.pretty(this));  
            EXIF.getAllTags(this);   
            //alert(EXIF.getTag(this, 'Orientation'));   
            Orientation = EXIF.getTag(this, 'Orientation');  
            //return;  
        });  
          
        var oReader = new FileReader();  
        oReader.onload = function(e) {  
            //var blob = URL.createObjectURL(file);  
            //_compress(blob, file, basePath);  
            var image = new Image();  
            image.src = e.target.result;  
            image.onload = function() {  
                var expectWidth = this.naturalWidth;  
                var expectHeight = this.naturalHeight;  
                  
                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
                    expectWidth = 800;  
                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
                    expectHeight = 1200;  
                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
                }  
                var canvas = document.createElement("canvas");  
                var ctx = canvas.getContext("2d");  
                canvas.width = expectWidth;  
                canvas.height = expectHeight;  
                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
                var base64 = null;  
                //修复ios  
                if (navigator.userAgent.match(/iphone/i)) {  
                    console.log('iphone');  
                    //alert(expectWidth + ',' + expectHeight);  
                    //如果方向角不为1,都需要进行旋转 added by lzk  
                    if(Orientation != "" && Orientation != 1){  
                        alert('旋转处理|'+Orientation);  
                        switch(Orientation){  
                            case 6://需要顺时针(向左)90度旋转  
                                alert('需要顺时针(向左)90度旋转');  
                                rotateImg(this,'left',canvas);  
                                break;  
                            case 8://需要逆时针(向右)90度旋转  
                                alert('需要顺时针(向右)90度旋转');  
                                rotateImg(this,'right',canvas);  
                                break;  
                            case 3://需要180度旋转  
                                alert('需要180度旋转');  
                                rotateImg(this,'right',canvas);//转两次  
                                rotateImg(this,'right',canvas);  
                                break;  
                        }         
                    }  
                      
                    /*var mpImg = new MegaPixImage(image);  
                    mpImg.render(canvas, {  
                        maxWidth: 800,  
                        maxHeight: 1200,  
                        quality: 0.8,  
                        orientation: 8  
                    });*/  
                    base64 = canvas.toDataURL("image/jpeg", 0.8);  
                }else{  
                     if(Orientation != "" && Orientation != 1){  
                        //alert('旋转处理');  
                        switch(Orientation){  
                            case 6://需要顺时针(向左)90度旋转  
                                alert('需要顺时针(向左)90度旋转');  
                                rotateImg(this,'left',canvas);  
                                break;  
                            case 8://需要逆时针(向右)90度旋转  
                                alert('需要顺时针(向右)90度旋转');  
                                rotateImg(this,'right',canvas);  
                                break;  
                            case 3://需要180度旋转  
                                alert('需要180度旋转');  
                                rotateImg(this,'right',canvas);//转两次  
                                rotateImg(this,'right',canvas);  
                                break;  
                        }         
                    }  
                      
                    base64 = canvas.toDataURL("image/jpeg", 0.8);    
                }  
               // var str="<div id='delimg1' class='upimg'><span class='delete_img_btn' onclick=delPic('" + base64 + "','delimg1')></span><img class='img_common'  src='" +base64+ "'/></div>";
               //               $(".img_add").append(str);
               // uploadImage(base64); 
               $('#myupload').ajaxSubmit({
                      data:{'img':base64},
                      dataType: 'json',
                      success: function (data) {
                          if(data.error!='0'){
                            alert(data.error);
                          }
                          if(data.pic){
                            var pic=data.pic;
                            if (pic.substring(0,1)=='.'){
                              s=pic.substring(1);  
                            }
                            var str="<div id='delimg1' class='upimg'><span class='delete_img_btn' onclick=delPic('" + s + "','delimg1')></span><img class='img_common'  src='" +s+ "'/></div>";
                            $(".img_add").append(str);
                          }
                      },
                      error: function () {
                          alert('上传失败');
                      },
                  })
               $("#img_add").attr("src", base64);  
            };  
        };  
        oReader.readAsDataURL(file);  
    }  
} 

php上传服务器部分

public function uploadimg(){
    $opensession=$this->opensession; 
    $path = './Public/Uploads/Friends/'.$opensession['openid']."_".$_POST['openid']."/";//上传路径
    if (isset($_POST)) { 
        $img = $_POST['img'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $pic_name = time() . rand(10000, 99999) . ".png" ;//图片名称 
        $pic_url = $path . $pic_name;//上传后图片路径+名称 
        if (file_put_contents($pic_url, $data)) { //临时文件转移到目标文件夹 
            echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name)); 
        } else { 
            echo json_encode(array("error"=>"上传失败!")); 
        } 
    }
}

大神 ,请问这是什么原因

阅读 2.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题