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


Posted in PHP onJuly 18, 2015

本文实例讲述了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程序设计有所帮助。

PHP 相关文章推荐
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
Nov 18 PHP
Zend Studio 无法启动的问题解决方法
Dec 04 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
Oct 11 PHP
PHP取得一个类的属性和方法的实现代码
May 22 PHP
使用php伪造referer的方法 利用referer防止图片盗链
Jan 20 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
Jun 27 PHP
PHP里8个鲜为人知的安全函数分析
Dec 09 PHP
php通过rmdir删除目录的简单用法
Mar 18 PHP
一个PHP实现的轻量级简单爬虫
Jul 08 PHP
Nginx下ThinkPHP5的配置方法详解
Aug 01 PHP
PHP实现的链式队列结构示例
Sep 15 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
Dec 20 PHP
thinkphp autoload 命名空间自定义 namespace
Jul 17 #PHP
简单谈谈PHP vs Node.js
Jul 17 #PHP
php+html5基于websocket实现聊天室的方法
Jul 17 #PHP
php获取错误信息的方法
Jul 17 #PHP
PHP实现C#山寨ArrayList的方法
Jul 16 #PHP
PHP计算加权平均数的方法
Jul 16 #PHP
PHP基于工厂模式实现的计算器实例
Jul 16 #PHP
You might like
php ftp文件上传函数(基础版)
2010/06/03 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
深入php数据采集的详解
2013/06/02 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
什么是数据抽象
2016/11/26 面试题
音乐教学案例
2014/01/30 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android