前端关键代码:
//自定义样式 <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> //展示内容 <div id="webcam"></div> <div class="btn"> <input type="button" value="删除" id="delBtn" οnclick="delPhoto();"/> <input type="button" value="拍照" id="saveBtn" οnclick="savePhoto();"/> </div> <div id="photos"> <img src="" id="img"> </div> //js <script type="text/javascript" src="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("${ctx}/common/webcam/uploadPhoto", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){ console.log(msg); pos = 0; $("#img").attr("src", "${ctx}/"+msg); }); } }; } else { saveCB = function(data) { image.push(data); pos+= 4 * w; if (pos >= 4 * w * h) { $.post("${ctx}/common/webcam/uploadPhoto", {type: "pixel", image: image.join('|')}, function(msg){ console.log(msg); pos = 0; $("#img").attr("src", "${ctx}/"+msg); }); } }; } $("#webcam").webcam({ width: w, height: h, mode: "callback", swffile: "${ctxStatic }/jquery-plugin/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>
java后端代码:
/**
* 功能描述:拍照并上传图片
*
* @since 2016/5/24
*/
@RequestMapping(value = "/uploadPhoto")
public void uploadPhoto(HttpServletRequest req, HttpServletResponse resp) throws BusinessException {
String basePath = "upload/" + DateUtils.getDate("yyyyMMdd") + "/";
String filePath = req.getSession().getServletContext().getRealPath("/") + basePath;
String fileName = DateUtils.getDate("yyyyMMddHHmmss") + ".png";
//默认传入的参数带类型等参数:data:image/png;base64,
String imgStr = req.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);
}
/**
* 功能描述: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) {
logger.error("生成图片异常:{}", e.getMessage());
return false;
}
}
参考文章:
http://blog.csdn.net/hfhwfw/article/details/5544408
http://www.xarg.org/project/jquery-webcam-plugin/ (js插件下载地址)
转载于:https://blog.51cto.com/jiyanle/1782625