HTML中網(wǎng)頁拍照并上傳照片的實(shí)現(xiàn)方法

網(wǎng)頁拍照

2018-05-29

2988

對(duì)于如何在網(wǎng)頁上進(jìn)行拍照并上傳照片的方法，可能很多程序員都覺得非常的簡(jiǎn)單，不就是調(diào)動(dòng)一下攝像頭開啟嗎?但是真正實(shí)現(xiàn)起來的話會(huì)發(fā)現(xiàn)，其實(shí)并不是這樣子的，經(jīng)過我們多次嘗試終于成功了，下面就跟大家分享一下。

代碼如下：

<%@ 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 = [];
//創(chuàng)建畫布指定寬度和高度
var canvas = document.createElement("canvas");
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
//如果畫布成功創(chuàng)建
if (canvas.toDataURL) {
//設(shè)置畫布為2d，未來可能支持3d
ctx = canvas.getContext("2d");
//截圖320*240，即整個(gè)畫布作為有效區(qū)(cutx?)
image = ctx.getImageData(0, 0, 320, 240);

saveCB = function(data) {
//把data切割為數(shù)組
var col = data.split(";");
var img = image;
//繪制圖像(這里不是很理解算法)
//參數(shù)data 只是每行的數(shù)據(jù) ，例如320*240 大小的照片，一張完整的照片下來需要240個(gè)data，每個(gè)data有320個(gè)rgb
for(var i = 0; i < 320; i++) {
//轉(zhuǎn)換為十進(jìn)制
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;
}
//當(dāng)繪制320*240像素的圖片時(shí)發(fā)給后端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) {
//把數(shù)據(jù)一點(diǎn)點(diǎn)的放入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="點(diǎn)擊觸發(fā)" >
</body>
</html>

注意

這是通過ajax來post圖片到服務(wù)器上，這是http請(qǐng)求，不能直接本地post。

需要jquery.webcam.js和jscam_canvas_only.swf 使用的時(shí)候目錄修改一下

服務(wù)端

網(wǎng)上的方法大都也都是這樣，不過都不提要去掉"data:image/jpeg;base64,"的事情，害我找了好久。

還有一點(diǎn)Base64最好用org.apache.commons.codec.binary.Base64的其他的好像有一個(gè)會(huì)出錯(cuò)，maven地址如下

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

服務(wù)端代碼如下

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)
{ //對(duì)字節(jié)數(shù)組字符串進(jìn)行Base64解碼并生成圖片
if (imgStr == null) //圖像數(shù)據(jù)為空
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)
{//調(diào)整異常數(shù)據(jù)
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;
}
}

本文由專業(yè)的app開發(fā)報(bào)價(jià)燚軒科技整理發(fā)布，如需轉(zhuǎn)載請(qǐng)注明作者及出處。