如何使用HTML5实现利用摄像头拍照上传功能(java版)

前台:


id="contentHolder"> style="display:block" id="canvas" width="320" height="320">
后台:

   @RequestMapping(value = "/sc", method = RequestMethod.POST)
    @ResponseBody
    public String sc(HttpServletResponse response,HttpServletRequest request,String sj) throws Exception {
        GenerateImage(sj);
        return "sxt";
    }
    // base64字符串转化成图片
    public static boolean GenerateImage(String imgStr) { // 对字节数组字符串进行Base64解码并生成图片
        if (imgStr == null) // 图像数据为空
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
// Base64解码
            byte[] b = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {// 调整异常数据
                    b[i] += 256;
                }
            }
// 生成jpeg图片
            String imgFilePath = "F:/test22.png";// 新生成的图片
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(b);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            return false;
        }
    }


总结:


1.流赋值给video,(调用接口,开启摄像头)
2.有个画图标签,有点像抓拍,
3.还差一个把数据上传给服务器(不过这个有代码)步骤是1.图片获取 2.图片上传
4.代码有点乱,应该是根植在别人框架,别人代码上。
网络上的都是PHP的
前台用base64编码的,后台也要用这个解码。
base64编码还可以作用在

src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/


gAAAABlBMVEX///


+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvM


jAvMTIGkKG


+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAt


lAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC” />
本来我以为是二进制字符串,直接读取,结果是错误的
5.总结:那个接口 navigator.getUserMedia,官网提示过时,不过就是不支持最新版的CHROME,其他版


本的CHROME也很好用,我用的是23.0.1271.97版本,其他低版本我觉得也兼容。
6.还有功能可以在加,比如关闭摄像头等。面对面视频。图片也能加功能,比如滤镜。

你可能感兴趣的:(如何使用HTML5实现利用摄像头拍照上传功能(java版))