html5获取到canvas画布后如何在Controller里面保存到数据库,并把图片保存到服务器上

[marcle001]

JSP页面上接收视频的控件以及画布控件

<video id="video" width="320" height="240" autoplay style="border:1px solid #d3d3d3;">></video>
<button id="snap">Snap Photo</button>
<canvas height="240" width="320" id="canvas" style="border:1px solid #d3d3d3;">></canvas>
<button id="upload" onclick="convertCanvasToImage()">上传</button>

实现拍照截图功能的JS

<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>

上传canvas的JS

function convertCanvasToImage() {
	  alert("上传成功！");
	  var image = new Image();
	  var dataURL = document.getElementById('canvas').toDataURL("image/png");
	  document.location.href = dataURL;
	  return image;
}

在浏览器中能够正确打开图片

如何在Controller里面保存到数据库,并把图片保存到服务器上

百度上写的是
从网页上传到服务器端的图片是base64_encode转码过的Data URL格式，数据在服务器端用base64_decode进行解码，保存成文件。

[CastleMi]

我的问题和你一样，你的解决了吗