如何以多部分形式将画布图像上传到 java servlet？答案

【问题标题】：How to upload a canvas image to java servlet in a multipart form?如何以多部分形式将画布图像上传到 java servlet？
【发布时间】：2017-10-20 05:43:52
【问题描述】：

我正在尝试将画布图像（从网络摄像头拍摄）上传到文件中，然后将其保存到 servlet。

JSP 文件：

<form id="submissionForm" action="/PSA/SaveImageServlet" method="POST" 
          name="registrationForm" enctype="multipart/form-data">
          <input name="camera1Image" type="image" id="camera1ImageID" style="visibility:hidden" />
          <input name="camera1File"  type="file"  id="camera1FileID"  style="visibility:hidden" />
          <img   name="camera1Img"   src="" id="camera1ImgID" style="visibility:hidden" />
</form>

Javascript：

var canvas1 = document.querySelector('#canvas1');
var ctx = canvas1.getContext('2d');
w = canvas1.width;
h = canvas1.height;
ctx.drawImage(video1, 0, 0, w, h);
var dataUrl = canvas1.toDataURL("image/jpeg", 0.95);
var image = new Image();
image.src = dataUrl;
$("#camera1ImageID").attr("src", image.src);
$("#camera1FileID").attr("val", image.src);
$("#camera1ImgID").attr("src", image.src);

在 servlet 上我有输出：内容类型：应用程序/八位字节流大小：0

我设法只用 ajax 提交了一个图像数据，但是没有 ajax 可以做到吗？

非常感谢

【问题讨论】：

src 输入属性只能与input type='image' 一起使用。见这里：https://www.w3schools.com/tags/att_input_src.asp。因此，尝试使用image.src 为您的文件输入设置value 属性，看看它是否有效。
谢谢，我按照你的建议试过了（我已经编辑了帖子），但在我的servlet中仍然看不到任何文件或图像。大小为“0”，内容类型为“application/octet-stream”
我犯了一个错误，设置value属性不能将画布图像转换为input file，转换可能很复杂。因此，更简单的方法是将dataUrl 值（该值是字符序列）发送到Servlet。有两种发送方式，一种是在表单中将值设置为input='hidden' 并使用提交按钮提交，另一种方式是使用Ajax 发送。 Servlet 得到dataUrlString 值后，可以用Java 代码将其转换为File 图像。 http://stackoverflow.com/a/24163254/5374508 可能有用。
谢谢！您的上一条评论很有帮助！

标签： javascript java jsp servlets html5-canvas

【解决方案1】：

有两种发送方式，一种是在表单中将值设置为 input='hidden' 并使用提交按钮提交，另一种方式是使用 Ajax 发送。 Servlet 获取到 dataUrl String 值后，可以通过 Java 代码将其转换为 File 图像。 http://stackoverflow.com/a/24163254/5374508 可能有用。

皓智5月21日16:50

【讨论】：