首页

HTML中网页拍照并上传照片的实现方法

网页拍照2018-05-29710

对于如何在网页上进行拍照并上传照片的方法,可能很多程序员都觉得非常的简单,不就是调动一下摄像头开启吗?但是真正实现起来的话会发现,其实并不是这样子的,经过我们多次尝试终于成功了,下面就跟大家分享一下。

代码如下:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ page session="false" %>  
<%@ page language="java" contentType="text/html;  
charset=UTF-8"  
         pageEncoding="UTF-8"%>  
<html>  
<head>  
    <title>spittr.Spitter</title>  
    <link rel="stylesheet"  
    type="text/css"  
    href="/resource/layui/css/layui.css" >  
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>  
    <script src="/resource/jquery.webcam.js"></script>  
    <script type="text/javascript">  
        $(function() {  
  
            var pos = 0, ctx = null, saveCB, image = [];  
//创建画布指定宽度和高度  
            var canvas = document.createElement("canvas");  
            canvas.setAttribute('width', 320);  
            canvas.setAttribute('height', 240);  
//如果画布成功创建  
            if (canvas.toDataURL) {  
//设置画布为2d,未来可能支持3d  
                ctx = canvas.getContext("2d");  
//截图320*240,即整个画布作为有效区(cutx?)  
                image = ctx.getImageData(0, 0, 320, 240);  
  
                saveCB = function(data) {  
//把data切割为数组  
                    var col = data.split(";");  
                    var img = image;  
//绘制图像(这里不是很理解算法)  
//参数data  只是每行的数据  ,例如320*240 大小的照片,一张完整的照片下来需要240个data,每个data有320个rgb  
                    for(var i = 0; i < 320; 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;  
                    }  
//当绘制320*240像素的图片时发给后端php  
                    if (pos >= 4 * 320 * 240) {  
//把图像放到画布上,输出为png格式  
                        ctx.putImageData(img, 0, 0);  
                        console.log(1,canvas.toDataURL("image/jpeg"));  
                        $.post("/fileupload", {type: "data", img: canvas.toDataURL("image/jpeg")},  
                            function(data,status){  
                                alert(status);  
                            }  
                        );  
                        pos = 0;  
  
                    }  
                };  
  
            } else {  
                saveCB = function(data) {  
//把数据一点点的放入image[]  
                    image.push(data);  
                    pos+= 4 * 320;  
                    console.log(1,image.join('|'));  
                    if (pos >= 4 * 320 * 240) {  
                        $.post("/fileupload", {type: "pixel", img: image.join('|')});  
                        pos = 0;  
                    }  
                };  
            }  
            $("#webcam").webcam({  
                width: 320,  
                height: 240,  
                mode: "callback",  
                swffile: "/resource/jscam_canvas_only.swf",  
                onSave: saveCB,  
                onCapture: function () {  
                    webcam.save();  
                },  
  
                debug: function (type, string) {  
                    console.log(type + ": " + string);  
                }  
            });  
        });  
    </script>  
</head>  
<body>  
<div id="webcam"></div>  
<input type="button" onclick="webcam.capture();" value="点击触发" >  
</body>  
</html> 

注意

这是通过ajax来post图片到服务器上,这是http请求,不能直接本地post。

需要jquery.webcam.js和jscam_canvas_only.swf 使用的时候目录修改一下

服务端

网上的方法大都也都是这样,不过都不提要去掉"data:image/jpeg;base64,"的事情,害我找了好久。

还有一点Base64最好用org.apache.commons.codec.binary.Base64的 其他的好像有一个会出错,maven地址如下

<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version>
</dependency>

服务端代码如下

import org.apache.commons.codec.binary.Base64;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.*;  
  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.OutputStream;  
import java.util.List;  
  
@Controller  
@RequestMapping("/fileupload")  
public class FileUploadController {  
  
  @RequestMapping(method=RequestMethod.GET)  
  public String uploadForm() {  
    return "uploadForm";  
  }  
}  
@RequestMapping(method=RequestMethod.POST)  
@ResponseBody  
public String processUpload(@RequestParam("img") String img) throws IOException {  
  GenerateImage(img);  
  return "success";  
}  
public static boolean GenerateImage(String imgStr)  
{   //对字节数组字符串进行Base64解码并生成图片  
  if (imgStr == null) //图像数据为空  
    return false;  
  try  
  {  
    //Base64解码  
    imgStr=imgStr.replaceFirst("data:image/jpeg;base64,", "");  
    byte[] b = Base64.decodeBase64(imgStr);  
    for(int i=0;i<b.length;++i)  
    {  
      if(b[i]<0)  
      {//调整异常数据  
        b[i]+=256;  
      }  
    }  
    //生成jpeg图片  
    String imgFilePath = "D:\\img\\new.jpg";//新生成的图片  
    OutputStream out = new FileOutputStream(imgFilePath);  
    out.write(b);  
    out.flush();  
    out.close();  
    return true;  
  }  
  catch (Exception e)  
  {  
    e.printStackTrace();  
    return false;  
  }  
}  

本文由专业的app开发报价燚轩科技整理发布,如需转载请注明作者及出处。

分享到微信朋友圈+
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。 如何使用?
推荐文章

热贴More +

服务范围More +

联系我们

请扫二维码联系客服

854221200@qq.com

185-3825-9583

QQ客服

关于  ·  招聘  ·  案例中心  ·  网站地图

©@2018 燚轩科技版权所有 豫ICP备16015002号-4

百度提供搜索支持