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));
}