html5图片异步上传servlet,使用Java Servlet保存HTML5图像

我知道已经有很多关于StackOverflow的问题,但是我已经搜索了尽可能多的问题,并且还没有使我的代码正常工作,所以我终于发布了自己的问题.

我的目标是保存HTML5< canvas>在我的网页中找到服务器上的文件.我希望使用Java servlet来完成此任务.

我的JavasScript像这样捕获画布图像数据：

var canvas = document.getElementById("screenshotCanvas");

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

var imageDataURL = canvas.toDataURL('image/png');

// I'm not if I need to do this, I've tried several different ways to no avail

//imageDataURL = imageDataURL.replace("image/png", "image/octet-stream");

//imageDataURL = imageDataURL.replace(/^data:image\/(png|jpeg);base64,/,"");

$.ajax({

url: screenshotCreateUrl,

type: "POST",

data: { imgBase64: imageDataURL },

error: function(jqXHR, textStatus, errorThrown) {

// Handle errors

},

success: function(data, textStatus, jqXHR) {

// Do some stuff

}

});

我的Java Servlet尝试像这样保存图像：

try {

HttpServletRequestWrapper wrappedRequest = new HttpServletRequestWrapper(request);

HttpServletRequestWrapper requestWithWrapper = (HttpServletRequestWrapper) wrappedRequest.getRequest();

byte[] contentData = requestWithWrapper.getContentData();

byte[] decodedData = Base64.decodeBase64(contentData);

FileOutputStream fos = new FileOutputStream("testOutput.png");

fos.write(decodedData);

fos.close();

} catch(Exception e) {

// Handle exceptions

}

该servlet成功写出了一个图像文件,但是无法正确打开,并且其中不包含所有图像数据.我的Javascript成功获取了< canvas>图像数据,如下所示：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAgAElEQVR4nJTa51NcaZ7ge+QBIZBAwgoEkvDeJt577733njRk4r3PhDRAJkkmiTdCXqWqUlVXtZl209OzvWN27t17/5rvvoCu7t6ZmN158YnfcyJOnIjz4vnGEyeOWdRmAP+RaI3fT2I0PiTtBJF9KKD8TTKVb5IpPosl+zCMdFMgKQY/otTPCFl3IljhSPiWB5E7XkToPAnVexNq8CVyP5Cwg0CCDwII2vfHx+TDC6MXz3df8mznGc7bTthu2PJwxRrrufvcnzbn4bQFjnNWuK3a4r3hQrDmBSGbLwlRvyR0w5OQ9ZeErHsRsuFLyIYvQeu+BCh88Zf74K/wxU8ZgL8qEH9VEAHq0L8RqAkjeCuCsO1IwrVRhGujCNNdCdVFEayNJEQXdUUfTYg+mmC9AH99BL47YfjuhOK7G4KvIRhfQzDee4F47QXibQrCe98f730/vPf98N3zw9/kT+B+IG . . . [and so on]

有什么想法我在这里想念的吗？我觉得我犯了一些我无法发现的小错误.