从Java Servlet将canvas图像保存到png图像文件中

我一直在尝试将canvas图像从HTML页面保存到Java Servlet中的图像文件。 我需要通过Ajax请求将图像从HTML发送到Java Servlet。 有人可以帮帮我吗？ 我已经尝试过以下选项

堆栈溢出问题1

这里， request.getPart("myImg")返回null，因此这不起作用。 请帮帮我。

我也尝试了以下解决方案将canvas的内容发送到java

这里的问题是它给了我一个例外，在下一行设置了无效的文字/长度

 BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes)); 

请帮忙！！

更新：

这是我的Ajax代码：

 function uploadImage() { var canvasServer = document.getElementById("canvasThumbResult"); var context = canvasServer.getContext("2d"); var imageDataURL = canvasServer.toDataURL('image/png'); var xhr = new XMLHttpRequest(); xhr.open("POST", trinityCvaServicesUrl+"common/uploadImage", true); var boundary = Math.random().toString().substr(2); xhr.setRequestHeader("content-type", "multipart/form-data; charset=utf-8; boundary=" + boundary); var multipart = "--" + boundary + "\r\n" + "Content-Disposition: form-data; name=myImg\r\n" + "Content-type: image/png\r\n\r\n" + imageDataURL + "\r\n" + "--" + boundary + "--\r\n"; xhr.send(multipart); /*xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("imgData="+imageDataURL);*/ } 

这是我的Java代码：

 FileOutputStream fos = null; try { Part part = req.getPart("myImg"); BufferedReader br = new BufferedReader(new InputStreamReader( part.getInputStream(), Charset.forName("utf-8"))); /*String imgData = request.getParameter("imgData"); BufferedReader br = new BufferedReader(new InputStreamReader( new ByteArrayInputStream( imgData.getBytes(StandardCharsets.UTF_8)), Charset.forName("utf-8")));*/ String sImg = br.readLine(); sImg = sImg.substring("data:image/png;base64,".length()); byte[] bImg64 = sImg.getBytes(); byte[] bImg = Base64.decodeBase64(bImg64); fos = new FileOutputStream(ReloadableProps.getProperty("local.image.save.path")+"img.png"); fos.write(bImg); /*String imgData = req.getParameter("imgData"); String img64 = imgData.replaceAll("data:image/png;base64,", ""); byte[] decodedBytes = DatatypeConverter.parseBase64Binary(img64 ); BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes)); File outputfile = new File(ReloadableProps.getProperty("local.image.save.path")+"img.png"); ImageIO.write(bfi , "png", outputfile); bfi.flush();*/ } catch (Exception e) { e.printStackTrace(); String loggerMessage = "Upload image failed : "; CVAException.printException(loggerMessage + e.getMessage()); } finally { if(fos != null) { fos.close(); } } 

Answer 1

我设法以某种方式保存图像。 不确定这是否是一种有效的方法。 如果您认为这可能不是一种有效的方法，请发表评论。 感谢您的反馈。

我的JavaScript代码：

  var canvasServer = document.getElementById("canvasThumbResult"); var context = canvasServer.getContext("2d"); var imageDataURL = canvasServer.toDataURL('image/png'); var ajax = new XMLHttpRequest(); ajax.open("POST",trinityCvaServicesUrl+"common/uploadImage",false); ajax.setRequestHeader("Content-Type", "application/upload"); ajax.send(imageDataURL); 

我的Java代码：

  InputStream in = null; FileOutputStream fos = null; try { HttpServletRequestWrapper wrappedRequest = new HttpServletRequestWrapper(req); InputStream is = wrappedRequest.getInputStream(); StringWriter writer = new StringWriter(); IOUtils.copy(is, writer, "UTF-8"); String imageString = writer.toString(); imageString = imageString.substring("data:image/png;base64," .length()); byte[] contentData = imageString.getBytes(); byte[] decodedData = Base64.decodeBase64(contentData); String imgName = ReloadableProps .getProperty("local.image.save.path") + String.valueOf(System.currentTimeMillis()) + ".png"; fos = new FileOutputStream(imgName); fos.write(decodedData); } catch (Exception e) { e.printStackTrace(); String loggerMessage = "Upload image failed : "; CVAException.printException(loggerMessage + e.getMessage()); } finally { if (in != null) { in.close(); } if (fos != null) { fos.close(); } }