jquery webcam + java服务拍照上传实例

前端关键代码：

//自定义样式

    #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; }


//展示内容

         

    

//js     $(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("

" + cams[i] + "

");             }         }     }); });*/

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插件下载地址）