调取摄像头拍照示例

最新推荐文章于 2024-07-02 00:50:11 发布

weixin_30558305

最新推荐文章于 2024-07-02 00:50:11 发布

阅读量190

点赞数

文章标签： java json javascript ViewUI

原文链接：http://www.cnblogs.com/whatarewords/p/10986289.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">
    <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();
    }  

　　<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" onclick="delPhoto();"/>
    　　　　<input type="button" value="拍照" id="saveBtn" onclick="savePhoto();"/>
　　　　</div>
　　　　<div id="photos">
    　　　　<img src="" id="img">
　　　　</div>
  </body>
</html>

后台方法：

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字符串转换成图片
     */
    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;
        }
    }
}

需要的jar包：

fastjson-1.2.7.jar

示例：

链接：https://pan.baidu.com/s/1e2tMqtklWz30-4y-ZvHQ_w
提取码：nc4w

转载于:https://www.cnblogs.com/whatarewords/p/10986289.html

weixin_30558305

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
调取摄像头拍照示例

页面：<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+"...
复制链接

扫一扫