浏览器利用Webcam+Flash启用摄像头，并完成拍照
大家都比较喜欢谈论高考，然而笔者就不愿意提及，因为笔者高考很不理想，以致于意志消沉。后来吧，就迷恋上了游戏一直到上个月，可以说是不学无术已经很久了。火爆的脾气也是随之而来，虽时光不再，脾气尚存。怎么办呢，笔者用HBuilder写点东西消消火。闲扯一下，很开心。下面直接上代码了：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浏览器利用Webcam+Flash启用摄像头，并完成拍照</title></head><!-- 照片 --><label class="control-label"></label><div id="photo_show"><!--拍照完成后，显示的区域，自己完善去吧！这里给你一个默认显示的图片，就是前面我们讲导航条的时候用到的 那张 --><img style="height: 120; width: 160;" id="userphoto" src="img/logo.png"></div><div id="ing_photo" style="display: none; width: 220;height: 160;" ><!-- 正在拍照 --><canvas id="cv20180820pm900" width="200" height="150" style="display: none;"></canvas><div id="webcam"></div> </div><div id="taking_photo" style="display: none;"><!-- 以点击拍照 --></div> <input class="btn green editable" type="button" id="bu tton_photo" title="启动摄像头" value="启动摄像头" onclick="open_camer();" /><input class="btn green editable" style="display: none;" type="button" id="take_photo_upload" title="拍照" value="拍照" onclick="getPhoto();" /></body><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="js/jquery.webcam.min.js" ></script> <script type="text/javascript" src="js/base64.js" ></script><script>var w = 320, h = 240; var pos = 0, ctx = null, saveCB, image = [];debugger;var canvas = document.getElementById('cv20180820pm900');canvas.setAttribute('width', w);canvas.setAttribute('height', h); var ctx = canvas.getContext("2d"); var image = ctx.getImageData(0, 0, w, h);var Imagedata;function open_camer(){//开启摄像头 $("#photo_show").hide();//摄像区域显示$("#ing_photo" ).show();$("#button_photo").hide();//启动摄像头，按钮隐藏$("#take_photo_upload").show();//拍照按钮显示} $("#webcam").webcam({width : w,height : h,mode : "callback",swffile : "js/jscam_canvas_only.swf",onTick : function(remain) {if (0 == remain) {$("#status").text("");} else {$("#status").text(remain + "秒后拍照");}},onSave : function(data) {var col = data.split(";");var img = image;for (var i = 0; i < w; i++) {var tmp = parseInt(col[i]);img.data[pos + 0] = (tmp >> 16) & 0xff;img.data[pos + 1] = (tmp >> 8) & 0xff;img.data[pos + 2] = tmp & 0xff;img.data[pos + 3] = 0xff;pos += 4;}if (pos >= 4 * w * h) {ctx.putImageData(img, 0, 0);pos = 0; Imagedata = canvas.toDataURL().substring(22);}}, onCapture : function() {webcam.save();$.post("AddPhoto.action", {image : canvas.toDataURL()}, function(msg) {});},debug : function(type, string) {console.log(type + ": " + string);},onLoad : function() {console.log('')var cams = webcam.getCameraList();for ( var i in cams) {$("body").append("<p>" + cams[i] + "</p>");}}});//拍照 function getPhoto() {webcam.capture();$("#photo_show").hide();$("#ing_photo").hide;/*思路：* 笔者本着，一切数据均为二进制编码的原则，处理图片1、通过canvas，将图片转换为Base64的编码2、把Base64的编码使用ajax post方式传递到后台java3、在java中对Base64进行解码，解析出来路径就是图片上传的路径地址4、最后存储图片*///上传部分 var uuid = $('#uuid').val();var url = "AddPhoto.action"var pars = {'type' : 1,'uuid' : uuid,'imagedata' : Imagedata};$.ajax({type : "POST", // 用POST方式传输url : url,data : pars,dataType : 'json',async : false,beforeSend : function() {},complete : function() {},error : function(XMLHttpRequest, textStatus, errorThrown) {},success : function(data) {},cache : false});}
</script>
</html>
接下来，我们点击启动摄像头。
选择拍照之后，照片数据会以二进制编码的格式发送至后台进行存储。
//1、处理Base64图片代码String imgaePath = "c:\\"+DateUtil.getTimestamp()+"20180820.jpg";GenerateImage(imagedata, imgaePath);```
//对字节数组字符串进行Base64解码，并生成图片 20180820
private void GenerateImage(String imagedata, String imgaePath) {if(imagedata.isEmpty()){//判断图像数据是否为空return;}BASE64Decoder decoder = new BASE64Decoder();try {//进行Base64解码byte[] bytes = decoder.decodeBuffer(imagedata);for (int i = 0; i < bytes.length; i++) {if(bytes[i] < 0){//调整异常数据bytes[i] += 256;}}//生成jpeg图片OutputStream out = new FileOutputStream(imgaePath);out.write(bytes);out.flush();out.close();return;} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}
}接下来，你会在你的电脑C盘下，找到这张照片。
好了，笔者要去吃鸡了。转载于:https://blog.51cto.com/13479739/2162163
浏览器利用Webcam+Flash启用摄像头，并完成拍照相关推荐
- js判断浏览器是否安装或启用了flash的方法总结
目录 # js判断浏览器是否安装或启用了flash的方法 # chrome浏览器启用flash插件的方法 # 参考 # js判断浏览器是否安装或启用了flash的方法 在传统浏览器,可以使用windo ...
- 利用Flash获取摄像头视频进行动态捕捉
一.引言 摄像头游戏是随着摄像头的普及和图形图像技术的不断发展而出现的.它摆脱了鼠标键盘的限制,给游戏者带来全新的游戏体验,能够实现许多传统游戏无法实现的游戏效果.它通过摄像头将玩家投影到游戏中,由玩 ...
- Flash Player漏洞利用Exploiting Flash Reliably
以下消息来自幻影论坛[Ph4nt0m]邮件组 前两天推荐过Mark Dowd的Paper "Exploiting Flash Reliably" [url]http://hi. ...
- js判断浏览器是否支持flash的方法
传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...
- 利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
- Google Chrome常规浏览器设置: Adobe Flash Player
Google Chrome常规浏览器设置: Adobe Flash Player 2011-05-09 12:10:15| 分类: 默认分类 | 标签:adobe flash google ...
- ie不能加载flash html,IE浏览器无法显示Flash怎么解决
1,先把IE选项统统设为默认或者:单击IE主窗口中的菜单"工具→Internet选项",在打开的窗口中选择"高级"选项卡,在下面的列表中找到"多媒体→ ...
- Chrome 浏览器提示adobe flash player不是最新版本
Chrome 浏览器提示adobe flash player不是最新版本 百度下载最新版. 刷新 Chrome浏览器.更换其他的浏览器. 刷新过后,无效. 打开Flash Player 检查安装的版本 ...
- 火狐浏览器firefox adobe flash player 崩溃
Mozilla出品的Firefox浏览器,凭借高度自定义组件,开源的内核,较高的安全性,丰富的扩展应用.火狐浏览器更新速度很快,现在迎来了最新版本号24,熟悉Firefox浏览器的用户对于Adobe出 ...
最新文章
- 技术一般，却被破格提拔！肯定有黑幕......
- C++ Primer 5th笔记（chap 10）泛型算法 ：特定容器算法list
- php水平线代码,在HTML中水平线标注与代码注释应该如何使用
- ES6-let和const命令
- 数字图像处理之图像基础
- 了解 DB2 Version 9.5 中的全局变量(转)
- TypeScript 2.5 发布，增加语言级重构
- 解决hibernate中的懒加载(延迟加载)问题
- 【转】刨根究底字符编码之十一——UTF-8编码方式与字节序标记BOM
- linux设备模型的主要功能,第 14 章 Linux 设备模型
- IBM本本日常维护--光驱篇
- 基于C语言设计的无边框背景透明窗体
- C语言麻将递归,一个简洁明了的递归函数——判断[麻将]的和牌
- vue项目兼容IE浏览器，判断IE11以下，则提示浏览器版本过低，更新浏览器页面
- XXL-JOB原理--任务调度中心执行器注册（三）
- Wi-Fi®安全状况
- .nc地形数据的python转换实现tiff
- 如何在eNSP将多台计算机ping通？
- HYBBS论坛表白墙网站PHP程序源码
- Unity3d入门选作作业（一）