base64文件上傳後臺處理

jscanvas前端畫圖

<canvas id="myCanvas" width="500" height="300"></canvas>

unction DrawPic() {
    // Get the canvas element and its 2d context
    var Cnv = document.getElementById('myCanvas');
    var Cntx = Cnv.getContext('2d');
    
    // Create gradient
    var Grd = Cntx.createRadialGradient(150, 150, 20, 140, 200, 330);
    Grd.addColorStop(0, "#c96513");
    Grd.addColorStop(1, "#861d33");

    // Fill with gradient
    Cntx.fillStyle = Grd;
    Cntx.fillRect(0, 0, 500, 300);

    // Write some text
    for (i=1; i<10 ; i++)
    {
        Cntx.fillStyle = "white";
        Cntx.font = "36px Microsoft YaHei";
        Cntx.globalAlpha = (i-1) / 9;
        Cntx.fillText("jQuery之家-htmleaf.com", i * 3 , i * 30);
    }
}

function UploadPic() {
    
    // generate the image data
    var Pic = document.getElementById("myCanvas").toDataURL("image/png");

    // console.log(Pic);

    // Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
    // console.log(Pic);

    // Sending the image data to Server
    // $.ajax({
    //     type: 'POST',
    //     url: 'php.php',
    
    //     data: {imageData: 'Pic'  },
     
    //     dataType: 'json',
    //     success: function (msg) {
    //         alert("Done, Picture Uploaded."); 
    //     }
    // });
 //    console.log(typeof Pic);
 // var test=Pic;
    $.post("url",{pic:Pic,uid:'1000000'},function(data){
        console.log(data);

    });

注意的代碼

var Pic = document.getElementById("myCanvas").toDataURL("image/png");

    // console.log(Pic);

     Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
//正則去除前面的base64,可是沒用到

    var Pic = document.getElementById("myCanvas").toDataURL("image/png");

Pic是一個字符串 類型

函數代碼

//文件上傳
function base64_upload($base64) {

    $base64_image = str_replace(' ', '+', $base64);
    //post的數據裏面，加號會被替換爲空格，須要從新替換回來，若是不是post的數據，則註釋掉這一行
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
        //匹配成功圖片類型
        if($result[2] == 'jpeg'){
            $image_name = md5(uniqid()).'.jpg';
         
        }else{
            $image_name = md5(uniqid()).'.'.$result[2];
        }

        $dirpath=mk_dir();
        $image_file =$dirpath."/".$image_name;
       //服務器文件存儲路徑
        if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
            return $image_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

//建立文件目錄
function mk_dir(){ 
    $dir = date('Y-m-d', time()); 
    $path="./Uploads/".$dir;
    if(is_dir($path)){  
        return $path;  
    }else{  
        mkdir($path,0777,true);  
        return $path;  
    }  
}

頭像邏輯

//base64文件上傳和修改函數
 function userpic(){

    $pic=I('pic');
    $uid=I('uid');
    if(!$pic&&!$uid){
      $data=array(
                'code'=>500,
                'msg'=>'參數錯誤'
                );
    $this->ajaxReturn ( $data );      
    }
    else{
       $url=base64_upload($pic);
    $row=M('yxtuser')->where(array('uid'=>$uid))->find();
      //修改
       if($row&&$url){
        $data=array(

          'uid'=>$uid,
          'uimg'=>$url,
          );   
          unlink($row['uimg']);
        if(M('yxtuser')->where(array('id'=>$row['id']))->save($data)){

          $info=array(

            'data'=>$data,
            'status'=>array(
                'code'=>200,
                'msg'=>'頭像修改爲功'
                )
            );  

            $this->ajaxReturn ( $info );  
        }
       }

     //新增邏輯
       if($url&&$uid){
          $data=array(
            'uid'=>$uid,
            'uimg'=>$url,
            );
           if($row=M('yxtuser')->add($data)){
               $info=array(

                'data'=>$data,
                'status'=>array(
                    'code'=>200,
                    'msg'=>'頭像上傳成功'
                    )
                );  
                $this->ajaxReturn ( $info );  
           }

       }     

    }//else end
   
  }//use