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