javaservlet
public class CanvasServlet extends HttpServlet {
private static final long serialVersionUID = -6027062736656145961L;@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("========================================================");
String imageName = request.getParameter("imagename");
String imageData = request.getParameter("imagedata");
int success = 0;
String message = "";
if (null == imageData || imageData.length() < 100) {
// 数据太短，明显不合理
message = "上传失败,数据太短或不存在";
} else {
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData, "UTF-8");
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.length;
int len2 = imageData.length();
if (null == imageName || imageName.length() < 1) {
imageName = System.currentTimeMillis() + ".png";
}
saveImageToDisk(data, imageName);
//
success = 1;
message = "上传成功,参数长度:" + len2 + "字符，解析文件大小:" + len + "字节";
}
// 后台打印
System.out.println("message=" + message);
}
private byte[] decode(String imageData) throws IOException {
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for (int i = 0; i < data.length; ++i) {
if (data[i] < 0) {
//调整异常数据
data[i] += 256;
}
}
return data;
}
// references: http://blog.csdn.net/remote_roamer/article/details/2979822
private boolean saveImageToDisk(byte[] data, String imageName)
throws IOException {
String photoPath = "G:/dsn/";
File photoPathFile = new File(photoPath);
int len = data.length;
//
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new File(
photoPathFile, imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
//
return true;
}
}
index.jsp
<!doctype html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>Html5在线拍照应用</title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</div>
<br/>
<button οnclick="putImage();" >send imgages</button>
<button οnclick="sendImage();" >上传..........</button>
<img id="MyPix" src=""/>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
//触发照片take
document.getElementById ("snap").addEventListener ("click",function (){
var context= document.getElementById("canvas").getContext("2d");
context.drawImage (video ,0 ,0 ,640 , 480 ) ;
}) ;
//将图片发放入img标签
function putImage() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // Get the context for the canvas.
var myImage = canvas.toDataURL("image/png"); // Get the data as an image.
var imageElement = document.getElementById("MyPix"); // Get the img object.
imageElement.src = myImage; // Set the src to data from the canvas.
var imgData =canvas.toDataURL("image/png");
var data = imgData.substr(22); //图片数据
var length = atob(data).length;//图片大小
}
}
// 上传图片，jQuery版
function sendImage(){
// 获取 canvas DOM 对象
var canvas = document.getElementById("canvas");
// 获取Base64编码后的图像数据，格式是字符串
// "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。
var dataurl = canvas.toDataURL("image/png");
// 为安全 对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $("#form").attr("action");
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type="hidden" name="action" value="receive.jsp" />
//var url = $("input[name='action']").val();
var url = "/can";
// 2. 也可以直接用某个dom对象的属性来获取
// <input id="imageaction" type="hidden" action="receive.jsp">
// var url = $("#imageaction").attr("action");
// 因为是string，所以服务器需要对数据进行转码，写文件操作等。
// 个人约定，所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: "myImage.png",
imagedata: imagedata
};
$.post("/canvas/can",{imagename : "myImage.png",imagedata:imagedata}, function (data) {
alert('上传成功!');
},"json");
};
</script>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>img</servlet-name>
<servlet-class>canvas.CanvasServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>img</servlet-name>
<url-pattern>/can</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
项目源码 网页拍照，上传服务器项目源码
项目发布项目 网页拍照，上传服务器项目发布项目
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
