html5+php实现拍照

getUserMedia(streams, success, error); 

streams：表示包括哪些多媒体设备的对象 

success：回调函数，获取多媒体设备成功时调用 

error：回调函数，获取多媒体设备失败时调用 

createObjectURL(blob || file);

File对象或者Blob对象

File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象.

Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

toDataURL，将canvas画布转化成base64编码的image;

1：获取照相设备

2：:拍照

3：将拍来的照片绘制到canvas画布上

4：将canvas画布转化成base64编码的图片

5：上传图片并保存

注意的是：

1、真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分。

 2、有时候用base64_encode加密后,以GET的形式传到其他页面,用base64_decode解密的时候,出现乱码.先用+号替换空格.那么输出就正常了$img = str_replace(' ', '+', $img);

html：

<div id="contentHolder">       
<video id="video" width="320" height="320" autoplay></video>       
<button id="camera">拍照</button>        
<canvas id="canvas" width="320" height="320">
</canvas> 

   </div>

js：

<script type="text/javascript">  
var video = document.getElementById('video');

window.addEventListener("DOMContentLoaded", function(){

navigator.getUserMedia = navigator.getUserMedia ||

                                 navigator.webkitGetUserMedia ||

                                 navigator.mozGetUserMedia;

        if (navigator.getUserMedia) {
  navigator.getUserMedia({video:true},
     function(stream) {
       video.src = window.URL.createObjectURL(stream);
       video.onloadedmetadata = function(e) {
          video.play();
       };
     },
     function(err) {
       alert(err.name);
     }
  );
} 
});   

$("#camera").click(function(){
var canvas = document.getElementById('canvas');
var context2D = canvas.getContext("2d");
context2D.fillStyle = "#ffffff";

    context2D.fillRect(0, 0, 320, 320);
context2D.drawImage(video, 0, 0, 320, 320);
var image_code =canvas.toDataURL("image/png");
$.ajax({
  type: "POST",
  url: "{:url('diy/diycamerasave')}",
  dataType : "json",
  data: "image_code="+image_code,
  success: function(msg){
    alert( "Data Saved: " + msg.msg );
  }
  
});

});

    

</script>

php端：

public function diycamerasave()

    {

        $image_code = $_POST['image_code'];

        //$image = base64_decode( str_replace('data:image/png;base64,', '', $image_code) );//在这里卡了很久

        $img = str_replace('data:image/png;base64,', '', $image_code);

        $img = str_replace(' ', '+', $img);

        $data = base64_decode($img);

        $file_name = "data/attached/images/diycamera".time().".png";

        $fp = fopen($file_name, 'w');

        fwrite($fp, $data);      

        fclose($fp);

        model('Diy')->insert_camera($file_name);

        $res ['err_no'] = 0;

        $res ['msg'] = "保存成功！";

        die(json_encode($res));

    }