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

前端关键代码：

//自定义样式
<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" onclick="delPhoto();"/>
    <input type="button" value="拍照" id="saveBtn" onclick="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();
    }
</script>

 

java后端代码：

/**
 * 功能描述：拍照并上传图片
 *
 * @since 2019/8/26
 */
@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 2019/8/26
 */
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://www.voidcn.com/article/p-rvwojmtq-bck.html

http://www.xarg.org/project/jquery-webcam-plugin/

转载于:https://my.oschina.net/u/4193800/blog/3097547