博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript+PHP实现在线拍照功能 (转)
阅读量:7103 次
发布时间:2019-06-28

本文共 1100 字,大约阅读时间需要 3 分钟。

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

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

HTML

   
Javascript+PHP实现在线拍照功能

在body中加入一个用于调用摄像组件的容器id#cam和一个显示上传信息的容器id#results。

Javascript

接下来调用摄像组件,我们先载入webcam.js,用于拍照和上传的js库。

然后在容器id#cam中,加入以下代码:

我们调用了webcam,其中webcam.set_api_url用来设置图像上传交互的php路径,set_quality可设置图像质量,set_shutter_sound设置声音,get_html输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度。

当点击按钮拍照时,需要执行以下代码:

当执行拍照动作时,代码与后台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";

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

原文链接地址:

转载于:https://www.cnblogs.com/littleyuan/archive/2012/10/22/2733577.html

你可能感兴趣的文章
人工智能玩具安全性遭质疑,刺痛了谁的神经?
查看>>
Mac系统下利用ADB命令连接android手机并进行文件操作
查看>>
修改Windows和linux系统时间
查看>>
深入VR教育乱象,教育部和工信部召开研讨会
查看>>
深入分析Spring 与 Spring MVC容器
查看>>
理解卷积神经网络的利器:9篇重要的深度学习论文(上)
查看>>
[推荐]ORACLE SQL:经典查询练手第五篇(不懂装懂,永世饭桶!)
查看>>
Effective C++ (2) C#中的Const和Readonly
查看>>
JAVA字符串格式化-String.format()的使用
查看>>
[Oracle]Oracle 各产品的 生命周期
查看>>
.net 面试题系列文章二(附答案)
查看>>
ASP.NET 中 对GridView(网格视图)的查、分页、编辑更新、删除操作
查看>>
ormlite 在android中 排序 条件查询
查看>>
JS实现队列效果,先进先出
查看>>
流媒体
查看>>
gitblit.cmd运行自动关闭
查看>>
不用Flex,进行轻量级的Flash RIA开发以降低发布文件的尺寸
查看>>
SQL Server中的版本号
查看>>
N!的从最末一个非0位开始自低位向高位数的第M位 soj 1115
查看>>
【Android 开发入门】走进Android开发的世界,HelloWorld
查看>>