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

网页拍照

2018-05-29

3316

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

代码如下：

<%@ 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开发报价燚轩科技整理发布，如需转载请注明作者及出处。