php在线拍照代码,JQ+PHP实现浏览器webcam摄像头在线定时自动拍照存储照片
今日分享,利用JQ+FLASH+PHP实现PC端浏览器在线定时或手动拍照的代码,这块我自己主要是用在培训期间学员在线考试时试卷自动拍照片存档。
下面先放出两个核心文件,一个是web浏览器页面在线拍照,另一个是将所拍照片存储在服务器指定文置上。
1、web页面显示摄像头页面 ---index.phphtml>
right: 0px; top: 0px; border: solid 2px #000;">
//var canvas = document.createElement("canvas");
//canvas.setAttribute('width', 320);
//canvas.setAttribute('height', 240);
var canvas = document.getElementById("canvas");//注意不要直接使用css设置画布的宽高
canvas.setAttribute('width', 320);//通过代码设置宽高属性,避免图片无法自适应画布的问题
canvas.setAttribute('height', 240);
var image = new Array();
var ctx = null;
var pos = 0;
var w = 320;//图片的宽高,无论图片的尺寸是否大于画布的尺寸都能自适应
var h = 240;
//getContext("2d") 对象内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
//可理解为 返回一个用于在画布上绘图的环境,并获得画布的绘图方法对象
var ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, 320, 240);//复制画布上指定矩形的像素数据,width,height,data,这样不需要自己手动设置
var img = image;//设置img的属性和值,拍照时重新给data赋值
//解释Canvas 的ImageData对象,width:图片宽度,height:高度,单位都为像素
//data Uint8ClampedArray类型的一维数组,包含着RGBA格式的整型数据,范围是0-255
//rgba(red, green, blue, alpha),前三个红绿蓝,范围0-255整数或0%-100%,alpha透明度,0.0-1.0
$(document).ready(function () {
$("#webcam").webcam({
width: 500,
height: 400,
mode: "callback",
swffile: "jscam_canvas_only.swf",
onTick: function (remain) { },
onSave: function (data) {
//图片处理
var col = data.split(";");
//x轴上的每一个像素的rgba
for (var i = 0; i
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;//red
img.data[pos + 1] = (tmp >> 8) & 0xff;//green
img.data[pos + 2] = tmp & 0xff;//blue
img.data[pos + 3] = 0xff;//Alpha
pos += 4;
}
//post>= 4 * 320(x轴像素) * 240(y轴像素) 表示读取图像数据完毕
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);//将图像显示到画布
$.post("cut.php", {type: "data", image: canvas.toDataURL("image/jpeg")},function(result){console.log(result)});//上传图片到服务器。
image = new Array();
pos = 0;
}
},
onCapture: function () {
//拍照,处理图片
webcam.save();
},
onLoad: function () {
var cams = webcam.getCameraList();//获取本机摄像头设备
for (var i in cams) {
jQuery("#cams").append("
" + cams[i] + "");
}
}
});
//点击拍照按钮
$("#cli").click(function () {
window.webcam.capture();
})
});
setInterval("$('#cli').click()",5000);//定时每5秒钟自动拍照片
上面这段代码中有一行代码id="cam" style=" width: 0; height: 0;"主要是为了隐藏FLASH显示,做为隐藏式拍照的需求。如果需要显示,自己设置一下大小即可。
同时,拍照所生成的图片文件可以是png也可是jpg,文件1和文件2,对应位置自己配置一下即可,不用修改其它文件。
2、摄像头拍照片后用于存储照片到指定服务器目录位置 ---cut.php<?php
$image_type=$_POST['type'];
$image_data=$_POST['image'];
$img = str_replace('data:image/jpeg;base64,', '', $image_data);
$img = str_replace(' ', '+', $img);
$data = base64 _decode($img); //这里因为虚拟主机的安全检测,无法直接写base64 _decode,请将下划线前的空格去掉
// 图片名称
$file_name = "uploads/".time().".jpg";//以时间戳命名
$fp = fopen($file_name, 'w');
fwrite($fp, $data);
fclose($fp);
?>
最后,总结一下
WEB页面利用摄像头拍照这个方案我在网上也搜索过,所有给出的代码都是部分的,不是少flash文件,就是jq的版本不对不能支持运行,所以在这段程序里面用到的jquery.webcam.min.js和jquery-2.1.4.min.js,其实还包含了jscam_canvas_only.swf这个FLASH文件,我直接打包文件一并共享出来,免得大家再到处找这些文件了。
之前还发了一个利用JQ和PHP来做人脸识别的博文(含源代码),其实可以和这个一起组合利用一下,比如在Web考试系统中需要在考生考试过程中拍照片,又希望拍到的照片是有效的,如果低头或是脸部有遮挡应该判定这张照片无效,就用到了人脸识别,如果识别人脸有效,就保存不重新拍照了。
虽然这只是一个简单应用,和专业级的人脸拍照和对比无法媲美,但还是给我们提供了一点思路。
php在线拍照代码,JQ+PHP实现浏览器webcam摄像头在线定时自动拍照存储照片相关推荐
- 网页 添加QQ/MSN/旺旺 在线聊天代码
很多时候我们都喜欢在博客里加上自己的IM联系方式,如QQ:xxxxx之类的,为了方便别人与我们聊天和知道我们是否在线,添加在线图标就是一个不错的创意,当你在线时,你网页上的IM图标将是亮着的,非常方便 ...
- 自动拍照扫描识别身份证信息SDK
自动拍照扫描识别身份证信息SDK 互联网金融,金融行业,P2P,的大背景:去年开始一股互联网加的风,刮遍了全国各地,到了2016/2017年火了互联网金融,也火了OCR识别软件(自动拍照扫描识别身份证 ...
- 浏览器利用Webcam+Flash启用摄像头,并完成拍照
大家都比较喜欢谈论高考,然而笔者就不愿意提及,因为笔者高考很不理想,以致于意志消沉.后来吧,就迷恋上了游戏一直到上个月,可以说是不学无术已经很久了.火爆的脾气也是随之而来,虽时光不再,脾气尚存.怎么办 ...
- JS调用本地摄像头拍照(兼容各大浏览器及IE8+)
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
- java build path entries 为空_TOOLFK工具-在线JAVA代码执行工具
本文要推荐的[TOOLFK]在线JAVA代码执行工具 ,提供JAVA代码在线执行功能. 網站名稱:ToolFk 網站鏈結:https://www.toolfk.com/ 工具链接:https://ww ...
- HTML在线颜色代码选取器源码
简介: HTML在线颜色代码选取器源码 前端设计工具HTML在线颜色代码选取器源码,一共19种颜色不同灰度选取,鼠标点击即可实现复制颜色代码,可本地使用也可上传在线当小工具使用! 网盘下载地址: ht ...
- 在线CSS代码压缩美化工具
在线CSS代码压缩美化工具 在线CSS代码压缩美化工具 在线CSS代码压缩.格式化工具.可以删除注释 在线CSS代码压缩.格式化工具.可以删除注释 https://tooltt.com/css/
- 3 款实用的在线JS代码工具推荐
本文为大家带来3款非常实用的在线JS代码工具,可以帮助你方便地处理JavaScript或jQuery代码. 1. 压缩工具 用于在线压缩你的JS代码,它有一个选项"Include lates ...
- shell执行perl_TOOLFK工具-在线Perl代码执行工具
本文要推荐的[TOOLFK]在线Perl代码执行工具 ,提供在线Perl代码执行功能. 網站名稱:ToolFk 網站鏈結:https://www.toolfk.com/ 工具链接:https://ww ...
- .net 本地文件管理 代码_Gitee 在线解决代码冲突上线,解决冲突不再需要 Git 命令...
IT服务圈儿 有温度.有态度的IT自媒体平台 来源: OSCHINA 社区 [http://www.oschina.net] 作者:码云Gitee 许多开发者在使用 Git 的时候会遇到代码冲突的情况 ...
最新文章
- 主题博客成功的10个理由
- 应用 TransactionScope 报:此操作对该状态的事务无效 的错误
- JZOJ 5932. 【NOIP2018模拟10.27】情报中心
- 【spring boot】【spring cloud】异常:找不到方法HikariDataSource.getMetricsTrackerFactory()
- JAVA的IO编程:管道流
- iOS开发—在@interface,@implementation和@property中变量的定义
- 为什么java抗并发_用最通熟易懂的话说明,为什么要使用java并发编程
- 从底层重学 Java 之 Stream 并行及标志 GitChat连接
- 《绅士》Typecho个人博客模板主题
- GNS3模拟器中关于创建vtp时,内存空间不足问题的解决
- iphone双卡_满屏的iPhone12评测来了,看哪个不重要,买哪个才重要|iphone|国行|iphone12...
- graph slam tutorial :从推导到应用2
- go 1.5 国内下载地址
- 阿里云POLARDB 2.0重磅来袭!为何用户如此的期待?
- 认识以及安装redis
- 智慧交通前瞻:如何解决城市发展“心病”?
- 设置下载安装 桌面_电脑C盘快满了不要慌,别只知道清垃圾,这些设置也要改...
- 人群疏散matlab程序,人群疏散方法及系统与流程
- vue设置video图片_vue video和vue-video-player实现视频铺满教程
- 获取当周和上周的周一、周日时间
热门文章
- 信号与系统(六)z变换
- Android修改APP名称和图标
- 3dmax寻找丢失贴图_寻找遗失的号码
- python制作模型排放清单_四川省人为源大气污染物排放清单及特征
- 百度搜索引擎推出“熊掌号”,保护原创作者权益
- ggtree/FigTree可视化系统发育树及bootstrap值
- Java实现名字按拼音排序和多条件排序
- h3csnmp管理命令_华为H3C交换机SNMP配置命令
- linux中tar命令怎么用,linux tar命令使用详解
- 计算机硬件系统三个子系统,硬件:计算机的体系结构3.ppt