如何将canvas保存到后台，以什么形式保存数据库好

qq_25639241 2015-03-04 02:44:24

页面：





<%@ page language="java" contentType="text/html; charset=utf-8"

	pageEncoding="utf-8"%>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<html> 

<head>

<link href="${pageContext.request.contextPath}/css/css.css"

	rel="stylesheet" type="text/css" />

<link href="${pageContext.request.contextPath}/css/frame.css"

	rel="stylesheet" type="text/css" />

<script src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"

	language="javascript"></script>

<script src="${pageContext.request.contextPath}/js/common_list.js"

	type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/js/common_list_pager.js"

	type="text/javascript"></script>

</head>

<body> 

<video id="video" width="320" height="240" autoplay style="border:1px solid #d3d3d3;">></video>

<button id="snap">Snap Photo</button>

<canvas height="1000" width="320" id="canvas" style="border:1px solid #d3d3d3;">></canvas>

<button id="upload" onclick="upLoadCanvas('${pageContext.request.contextPath}/reader/upLoadCanvas')">上传</button>

<script type="text/javascript">

// Put event listeners into place

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) { // WebKit-prefixed

navigator.mozGetUserMedia(videoObj, function(stream){

video.src = window.URL.createObjectURL(stream);

video.play();

}, errBack);

}

// Trigger photo take

document.getElementById("snap").addEventListener("click", function() {

context.drawImage(video, 0, 0, 320, 240);

});

}, false);



</script>

</body> 

</html>

ajax



/**

 * 视频拍照上传到数据库

 * 

 * @param uri

 */

function upLoadCanvas(uri){

	var canvas = document.getElementById("canvas"),

	context = canvas.getContext("2d");

	var imageData = context.getImageData(0, 0, 240, 240);

	context.putImageData(imageData,0,300);

	alert(imageData[0]);

	$.ajax({

		url : uri,

		type : "POST",

		dataType : "json",

		data : {

			"imageData" : imageData

		},

		async : false,

		cache : false,

		beforeSend : function() {

		},

		success : function(data) {

			window.close();

		}

		

	});

}

controller



/**

	 * 上传截取的视频照片

	 * 

	 * @param response

	 * @param overdueQueryForm

	 */

	@RequestMapping("/upLoadCanvas")

	@ResponseBody

	public String upLoadCanvas(HttpServletRequest request){

		request.getParameter("imageData");

		System.out.print(request.getParameter("imageData"));

		return null;

	}