摘要:个人网站欢迎来访简介原来做项目遇到了调用摄像头功能,小白遇到这情况立刻就去网上搜索,最后用的,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件,资源链接使用方法部分参考这两个参数考虑到显示效果为标准的
个人网站欢迎来访简介
原来做项目遇到了调用摄像头功能,php小白遇到这情况立刻就去网上搜索,最后用的使用方法
https://www.helloweba.com/vie...,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件jQuery webcam plugin,资源链接:http://www.xarg.org/project/j...【demo】
部分参考:http://www.cnblogs.com/loyung...
width: 320, height: 240,//这两个参数考虑到显示效果320*240为标准的显示模式,不可更改(插件硬伤)。如果要修改大小其实也是可以的,修改jscam.swf源文件
mode:// 存储方式可以按以下三种方式callback | save | stream
swffile://可以选择解压后jscam_canvas_only.swf或jscam.swf,jscam_canvas_only加快了每次调用设备的效率,因为他只有jscam.swf的1/3
onTick: function(remain) {}//定时触发,定时拍照
onSave://关键地方,设置提交数据处理后台做图像参数设置
onCapture://点击拍照保存
onLoad://插件加载事件,通常这里罗列设备列表
jQuery("#webcam").webcam({ width: 320, height: 240, mode: "callback", swffile: "/jscam_canvas_only.swf", // canvas only doesn"t implement a jpeg encoder, so the file is much smaller onTick: function(remain) { if (0 == remain) { jQuery("#status").text("Cheese!"); } else { jQuery("#status").text(remain + " seconds remaining..."); } }, onSave: function(data) { var col = data.split(";"); // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/ }, onCapture: function () { webcam.save(); // Show a flash for example }, debug: function (type, string) { // Write debug information to console.log() or a div, ... }, onLoad: function () { // Page load var cams = webcam.getCameraList(); for(var i in cams) { jQuery("#cams").append("
上面的js代码再定义一个,就可以打开摄像头了,但是要和php交互还要做一些修改完整demo
下面代码中的注释仅是个人理解,并非作者原有,仅供参考html+js
php后台处理jQuery-webcam-master
后台是涉及的是php绘图技术,在php.ini中开启extension=php_gd2.dll,如果是框架开发,在上面的js中$.post异步给框架【TP】中控制器的某个方法
$csv) { foreach (explode(";", $csv) as $x => $color) { imagesetpixel($im, $x, $y, $color); } } } else { // input is in format: data:image/png;base64,... $im = imagecreatefrompng($_POST["image"]); } imagepng($im,"circle".time().".png");//保存,指定路径 imagedestroy($im); // do something with $im源码编译
该插件有个缺点就是像素大小不能调整,如果要调整像素大小需要编译src目录下的源码,我没有亲自测试,提供编译成功的例子 http://www.cnblogs.com/iasp/p...【jQuery Webcam Plugin jscam.swf文件反编译工具使用说明】demo下载
原作者本人【https://github.com/infusion/j...】
我自己的demo:
git下载:https://github.com/mytheshow/...
百度云下载:链接:http://pan.baidu.com/s/1hsBqwfE 密码:u2c2
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83462.html
摘要:个人网站欢迎来访简介原来做项目遇到了调用摄像头功能,小白遇到这情况立刻就去网上搜索,最后用的,太烂了,作者也没说如何去使用,如果用的是框架开发更是很麻烦今天再次发现一款比较灵活的插件,资源链接使用方法部分参考这两个参数考虑到显示效果为标准的 个人网站欢迎来访 简介 原来做项目遇到了调用摄像头功能,php小白遇到这情况立刻就去网上搜索,最后用的https://www.helloweba....
摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...
摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...
摘要:先看了下基于实现的超酷摄像头拍照功能,结果发现我的浏览器不支持,连都没运行起来,放弃。于是选择插件,参照示例,实现了拍照功能,但是发现每次打开浏览器,都会出现是否允许使用摄像头的选择框,好烦,而且的代码太繁琐。 开发环境:Grails 3.2.3,jQuery 1.11.3 最近做项目,遇到一个正常但又少见的需求——拍照,于是在Google上搜索js 拍照,出现的都是Html5的实现,...
摘要:先看了下基于实现的超酷摄像头拍照功能,结果发现我的浏览器不支持,连都没运行起来,放弃。于是选择插件,参照示例,实现了拍照功能,但是发现每次打开浏览器,都会出现是否允许使用摄像头的选择框,好烦,而且的代码太繁琐。 开发环境:Grails 3.2.3,jQuery 1.11.3 最近做项目,遇到一个正常但又少见的需求——拍照,于是在Google上搜索js 拍照,出现的都是Html5的实现,...
阅读 1102·2021-11-23 10:04
阅读 2374·2021-11-22 15:29
阅读 2644·2021-11-19 09:40
阅读 688·2021-09-22 15:26
阅读 2086·2019-08-29 16:27
阅读 2457·2019-08-29 16:10
阅读 1876·2019-08-29 15:43
阅读 3240·2019-08-29 12:43