网页拍照并上传照片

最新推荐文章于 2024-10-01 09:15:48 发布

置顶 remarkableyan

最新推荐文章于 2024-10-01 09:15:48 发布

阅读量3.4k

点赞数

文章标签：拍照上传 base64 服务器

本文链接：https://blog.csdn.net/qq_36869255/article/details/80487556

版权

我在网上找了很久这种方式但结果却都不理想，找了很久才找到解决方法，于是打算写篇博客来说一下。

Talk is cheap. Show me the code.

<%@ 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" οnclick="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;
  }
}