|
花了两个小时实现了javaWeb调用摄像投拍照功能。 javaWeb调用摄像头拍照，有两种解决方案：一种是使用ActiveX控件调用摄像头实现拍照上传功能，这种方式只能在ie浏览器下有效，限制非常大；另一种是调用flash实现拍照功能，这篇博客就主要介绍下如果通过调用flash插件实现调用本地摄像头拍照的功能。 运行后的页面效果如下图： html页面源码如下 [HTML] 纯文本查看 复制代码 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/sxt/js/jquery.webcam.min.js"></script>
<script type="text/javascript">
$(function () {
var w = 320, h = 240;
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement("canvas");
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
console.log(canvas.toDataURL);
if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(0, 0, w, h);
saveCB = 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);
/* $.post("servlet/CatD", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){
console.log("===="+eval(msg));
pos = 0;
$("#img").attr("src", msg+"");
}); */
$.ajax({
type: "post",
url: "servlet/CatD?t="+new Date().getTime(),
data: {type: "pixel", image: canvas.toDataURL("image/png")},
dataType: "html",
success: function(data){
console.log("===="+data);
pos = 0;
$("#img").attr("src", "");
$("#img").attr("src", data);
}
});
}
};
} else {
saveCB = function(data) {
image.push(data);
pos+= 4 * w;
if (pos >= 4 * w * h) {
/* $.post("servlet/CatD", {type: "pixel", image: image.join('|')}, function(msg){
console.log("+++++"+eval(msg));
pos = 0;
$("#img").attr("src", msg+"");
}); */
$.ajax({
type: "post",
url: "servlet/CatD",
data: {type: "pixel", image: image.join('|')},
dataType: "json",
success: function(data){
console.log("+++++"+eval(msg));
pos = 0;
$("#img").attr("src", msg+"");
}
});
}
};
}
$("#webcam").webcam({
width: w,
height: h,
mode: "callback",
swffile: "js/jscam_canvas_only.swf",
onSave: saveCB,
onCapture: function () {
webcam.save();
},
debug: function (type, string) {
console.log(type + ": " + string);
}
});
});
//拍照
function savePhoto(){
webcam.capture();
}
/*$(function () {
var image = new Array();
var w = 320, h = 240;
var pos = 0;
$("#webcam").webcam({
width: w,
height: h,
mode: "callback",
swffile: "${ctxStatic }/jquery-plugin/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) {
// Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
image.push(data);
pos += 4 * w;
if (pos == 4 * w * h) {
$.post("${ctx}/common/webcam/uploadPhoto", {w: w, h: h, image: image.join('|')}, function (msg) {
pos = 0;
image = new Array();
$("#img").attr("src", "${ctx}/"+msg);
});
}
},
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("<li>" + cams[i] + "</li>");
}
}
});
});*/
</script>
<style type="text/css">
#webcam { border: 1px solid #666666; width: 320px; height: 240px; }
#photos { border: 1px solid #666666; width: 320px; height: 240px; }
.btn { width: 320px; height: auto; margin: 5px 0px; }
.btn input[type=button] { width: 150px; height: 50px; line-height: 50px; margin: 3px; }
</style>
</head>
<body>
<div id="webcam"></div>
<div class="btn">
<input type="button" value="删除" id="delBtn"/>
<input type="button" value="拍照" id="saveBtn"/>
</div>
<div id="photos">
<img src="" id="img">
</div>
</body>
</html>servlet页面源码如下 [Java] 纯文本查看 复制代码 import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import sun.misc.BASE64Decoder;
public class CatD extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String basePath = "upload/";
String filePath = request.getSession().getServletContext().getRealPath("/") + basePath;
// String fileName = DateUtils.getDate("yyyyMMddHHmmss") + ".png";
String fileName = (new Date()).getTime()+".png";
//默认传入的参数带类型等参数：data:image/png;base64,
String imgStr = request.getParameter("image");
if (null != imgStr) {
imgStr = imgStr.substring(imgStr.indexOf(",") + 1);
}
Boolean flag = GenerateImage(imgStr, filePath, fileName);
String result = "";
if (flag) {
result = basePath + fileName;
}
// this.writeJson(result, resp);
response.getWriter().print(JSON.toJSON(result));
}
/**
* 功能描述：base64字符串转换成图片
*
* @since 2016/5/24
*/
public boolean GenerateImage(String imgStr, String filePath, String fileName) {
try {
if (imgStr == null) {
return false;
}
BASE64Decoder decoder = new BASE64Decoder();
//Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
//如果目录不存在，则创建
File file = new File(filePath);
if (!file.exists()) {
file.mkdirs();
}
//生成图片
OutputStream out = new FileOutputStream(filePath + fileName);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
}
|
收藏
淘帖
踩
