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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, php
在线拍照
javascript经典实例、javascript项目实例、javascript实例、javascript实例精通、javascript实例教程,以便于您获取更多的相关知识。

时间: 2024-10-29 19:44:32

PHP+Javascript实现在线拍照功能实例_php技巧的相关文章

php实现xml与json之间的相互转换功能实例_php技巧

本文实例讲述了php实现xml与json之间的相互转换功能.分享给大家供大家参考,具体如下: 用php实现xml与json之间的相互转换: 相关函数请查看php手册. 一.参考xml如下 <?xml version="1.0" encoding="UTF-8"?> <humans> <zhangying> <name>张三</name> <sex>男</sex> <old>

Javascript+PHP实现在线拍照功能

  我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统.比如驾校采集指纹拍照流程.考试现场采集照片等.我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能. 实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash.   HTML   <!DOCTYPE HTML>  <html>  <head>  <meta charset="utf-8">

ThinkPHP实现支付宝接口功能实例_php实例

本文实例讲述了ThinkPHP实现支付宝接口功能的方法.分享给大家供大家参考.具体分析如下: 最近做系统,需要实现在线支付功能,毫不犹豫,选择的是支付宝的接口支付功能,这里我用的是即时到帐的接口,具体实现的步骤如下: 一.下载支付宝接口包 下载地址:https://b.alipay.com/order/productDetail.htm?productId=2012111200373124&tabId=4#ps-tabinfo-hash 具体如何下载,我就不在罗嗦了-- 二.重新整理接口包文件,

JavaScript调用浏览器打印功能实例分析_javascript技巧

本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

PHP在线打包下载功能示例_php技巧

本文实例讲述了PHP在线打包下载功能实现方法.分享给大家供大家参考,具体如下: 昨天晚上,为了弄这个打包下载的事,弄的事焦头烂额.有几个问题,第一个是开始PHP_ZIP.dll的问题.话说只要把PHP.INI里面的extend_dir里面的前的";"号去掉.再重启IIS或者apache就可以了. 问题是老是找不到系统配置的真正的PHP.INI. PHP配置图 第二个是告诉你配置文档的路径,按着找就可以了.我当时脑袋秀逗了,浪费了很多时间. 这个开启PHP_ZIP扩展库以后,就可以开始打

[图]Flash+ASP实现电子互动地图在线标注功能_应用技巧

于电子互动地图的信息量太大,完全可以通过客户端的广大操作者一同完成海量的标注工作,这样就必须实现在线标注的功能.而这样的功能单独依靠Flash本身是无法实现的.我们可以通过ASP.ASP.net.PHP等协助实现.在本例中,我们使用ASP来共同实现在线标注功能. 1.基本的通信过程 图1 SWF+XML与服务器的通信过程示意图点击看大图 图1展示的是本例中的通信过程示意.在 Flash 和数据库之间传递信息的服务器端脚本以 XML 格式读写数据. 可用 ActionScript 将 SWF 文件

基于ASP实现QQ在线查询功能_应用技巧

本文给大家分享的qq在线查询功能代码非常简单,具体内容如下: 这段程序的方法是利用XMLHTTP来读取腾讯网站的相应HTML代码获取QQ的头像,根据这个想法,我们还可以抓取很多其他网站的信息,如天气预报.新闻等等. <script language="JavaScript"> <!-- function getFaceImg(QQcode) { var Re=new RegExp("^[1-9]{1}/d+$","g"); if

自己封装的一个简单的倒计时功能实例_javascript技巧

因为平常工作中很常用到该功能,所以就利用这次国庆假期,重新梳理与对原有代码进行改善,再集成一个常用的功能,最终封装出这个"简单倒计时"功能. 该倒计时方法具有以下该功能: 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数,来设置在每一天内不同的时间段进行倒计时. * 该方法还未通过实际工作的检测,稳定性未知(如果实际工作通过,会删除这段话) function countDown(date,target,filter){ var setTime = new Date

JavaScript操作选择对象的简单实例_javascript技巧

JavaScript操作选择对象的简单实例 //替换选中文本内容,参数text为要替换的内容 function SetSelectionText(text) { //非IE浏览器 if (window.getSelection) { var sel = window.getSelection(); alert(sel.rangeCount); //选区个数, 通常为 1 . sel.deleteFromDocument(); //清除选择的内容 var r = sel.getRangeAt(0)