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 相关文章推荐
通过对服务器端特性的配置加强php的安全
Oct 09 PHP
社区(php&amp;&amp;mysql)六
Oct 09 PHP
比较详细PHP生成静态页面教程
Jan 10 PHP
PHP数据库调用类调用实例(详细注释)
Jul 12 PHP
php小经验:解析preg_match与preg_match_all 函数
Jun 29 PHP
php数组删除元素示例
Mar 21 PHP
ThinkPHP3.1新特性之内容解析输出详解
Jun 19 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
Jul 14 PHP
PhpStorm terminal无法输入命令的解决方法
Oct 09 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
Feb 06 PHP
PHP strripos函数用法总结
Feb 11 PHP
yii2的restful api路由实例详解
May 14 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下载远程文件类(支持断点续传)
2008/11/14 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python创建字典的八种方式
2019/02/27 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
最热门的自我评价
2013/12/30 职场文书
美德少年事迹材料
2014/01/23 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
大型晚会策划方案
2014/02/06 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js