PHP+Javascript实现在线拍照功能实例


本文实例讲述了PHP+Javascript实现在线拍照功能。分享给大家供大家参考。具体如下:

我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统。比如驾校采集指纹拍照流程、考试现场采集照片等。我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能。

实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Javascript+PHP实现在线拍照功能</title>
</head>
<body>
<div id="cam">
<!--调用摄像组件并显示图像-->
<input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()">
http://siteweb.com/sitemaps.xml
</div>
<div id="results">
<!--显示上传结果-->
</div>
</body>
</html>

在body中加入一个用于调用摄像组件的容器id#cam和一个显示上传信息的容器id#results。
 
Javascript
 
接下来调用摄像组件,我们先载入webcam.js,用于拍照和上传的js库。

复制代码 代码如下:
<script type="text/javascript" src="webcam.js"></script>
 
然后在容器id#cam中,加入以下代码:

<script language="JavaScript">
webcam.set_api_url( 'action.php' );
webcam.set_quality( 90 ); // 图像质量(1 - 100)
webcam.set_shutter_sound( true ); // 拍照时播放声音
document.write( webcam.get_html(320, 240, 160,120) );
</script>

我们调用了webcam,其中webcam.set_api_url用来设置图像上传交互的php路径,set_quality可设置图像质量,set_shutter_sound设置声音,get_html输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度。
 
当点击按钮拍照时,需要执行以下代码:

<script language="JavaScript">
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot() {
document.getElementById('results').innerHTML = '<h4>Uploading...</h4>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
var image_url = RegExp.$1;
document.getElementById('results').innerHTML =
'<h4>Upload Successful!</h4>' +
'<img src="' + image_url + '">';
webcam.reset();
}
else alert("PHP Error: " + msg);
}
</script>

当执行拍照动作时,代码与后台php交互,如果上传图片完成后,则返回相应的信息。
 
PHP
 
action.php所做的就是将本地拍照的图像上传到服务器,并将图片路径返回给前端。注意存放图片的路径要给写权限。

$filename = date('YmdHis') . '.jpg';
$result = file_put_contents( 'pics/'.$filename, file_get_contents('php://input') );
if (!$result) {
print "ERROR: Failed to write data to $filename, check permissions\n";
exit();
}
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/pics/' . $filename;
print "$url\n";

这里只是简单的介绍了下在线拍照和上传功能,其实深入应用场景如上传后再裁剪,生成多张不同比例的图像等等,大家自己去琢磨吧。

希望本文所述对大家的php程序设计有所帮助。



相关阅读:
div图片marquee无缝连接实现代码
jQuery获取父元素及父节点的方法小结
微信随机生成红包金额算法java版
Linux中进程管理工具htop的安装与其命令使用教程
Java利用Sping框架编写RPC远程过程调用服务的教程
JavaScript使用二分查找算法在数组中查找数据的方法
Javascript的表单验证-揭开正则表达式的面纱
全面解析Objective-C中的block代码块的使用
基于Bootstrap重置输入框内容按钮插件
Javascript 多浏览器兼容总结(实战经验)
javascript框架设计之类工厂
JavaScript实现查找字符串中第一个不重复的字符
mysql错误处理之ERROR 1786 (HY000)
Linux下快速批量修改文件夹下的图片名称的方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 朗然真心,与你常在 在家里回忆上海 历史故事:春秋五霸 草的生命在地下,长出来的是阳光 春姑娘来了作文150字 新生巧斗学长 你走得那天 观看电影《焦裕禄》感想心得 2016职业学校学生评语 无题---【梦倾年少系列】作文200字 婚姻是什么?婚姻就是个压力锅! 三年级作文新发现 读《秋日的怀念》有感 小学六年级作文750字:下雨 小学生诚信格言 爱情很讨厌,还好你可爱 想念海子作文500字 系艺术团活动总结 关于等待的作文250字 天才猪的发明作文650字 保护水资源建议书500字 燕子喝水 建材商场开业庆典主持词 活得优雅是一辈子的事情 失去了信任,爱还占的住脚吗 高考升学宴学生答谢词简单 年度交通工程建设情况汇报 想你了,却不忍心打扰你 论数据仓库和数据挖掘技术的构件库管理系统 在我的眼里你永远都会散发光辉 家庭800字 给老婆的经典情话 小学生学雷锋作文400字 细节决定成败作文素材 奉和幸大荐福寺(寺即中宗旧宅) 2015年度农民入党申请书 【忆、永恒】 同学之间作文500字 关于孤独思念的句子 你我的情谊天长地久 母亲分苹果 国庆送客户祝福语 990天里,我对我们的感想 课堂的味道 伤感说说心好累了:累了,不爱了。倦了,你也走了 情牵秋雨作文 深秋时节的西山红叶200字 【精品】安全员工作总结 很想爱 滑稽的照片(邹昱荷)作文350字 师范类专业个人职业生涯规划书

Copyright © 2016 phpStudy |