今天介绍一款摄像头插件,并且结合PHP实现一个简单的在线拍照并上传的功能,前提你的电脑要有摄像头哦!~
HTML
我们在页面中放置一个摄像头拍照按钮,并把照片放在#results里面
<div id="cam">
<!--调用摄像组件并显示图像-->
webcam.set_api_url('ajax.php');//远程上传图片
webcam.set_quality(100); // 图像质量(1 - 100)
webcam.set_shutter_sound(true); // 拍照时播放声音
document.write(webcam.get_html(320, 240, 160, 120));//输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度
<input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()">
</div>
<div id="results"> <!--显示上传结果--> </div>
jQuery
接下来调用摄像头组件。
<script type="text/javascript" src="webcam.js"></script>
我们看下点击拍照时执行的函数:
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
$("#results").html('上传中...');
webcam.snap();
}
function my_completion_handler(msg) {
$("#results").html('<img src="' + msg + '"/>');
}
Ajax.php
远程将拍照的图像上传到服务器,并将图片路径返回给前端。注意存放图片的路径要给写权限。特别是linux服务器哦~
$filename = date('YmdHis') . '.jpg';
$file ='uploads/';
$result = file_put_contents( $file.$filename, file_get_contents('php://input') );
echo $file.$filename;
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791