為什么80%的碼農都做不了架構師？>>> ??

jscanvas前端畫圖

<canvas id="myCanvas" width="500" height="300"></canvas>unction DrawPic() {// Get the canvas element and its 2d contextvar Cnv = document.getElementById('myCanvas');var Cntx = Cnv.getContext('2d');// Create gradientvar Grd = Cntx.createRadialGradient(150, 150, 20, 140, 200, 330);Grd.addColorStop(0, "#c96513");Grd.addColorStop(1, "#861d33");// Fill with gradientCntx.fillStyle = Grd;Cntx.fillRect(0, 0, 500, 300);// Write some textfor (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 datavar 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

轉載于:https://my.oschina.net/oneboi/blog/734538

總結

以上是生活随笔為你收集整理的base64文件上传后台处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。