将base64中的图像发送到Java Web服务器，转换并保存

我有一个网站，有一个正在进行的网络摄像头流，它应该将视频流的快照发送到我自己的Java Web服务器。快照生成和显示功能在网站上运行良好。我想将带有jQuery AJAX POST请求的快照发送到我的Web服务器，如下所示：

$.ajax({
    type: 'POST',
    url: servicePath + "upload",
    contentType: 'multipart/form-data',
    xhrFields: {withCredentials: false},
    headers: {},
    data: hidden_canvas.toDataURL('image/png'),
    success: function(data, status, xhttp) {
        alert(data);
    },
    error: function() {
        alert("Error uploading snapshot file to server!");
    }
}); 

正如我提到的，显示插入

的

src

属性中的

隐藏的\u canvas.toDataURL（'image/png'）

非常有效，因此它绝对有效

我在Web服务器上的服务如下所示：

---

我终于成功了。来自的

toBlob

建议让我走上了正确的道路。但我无法按预期发送blob，我不得不将其放入

FormData

中，因此不得不调整我的Web服务。解决方案如下所示：

网站Javascript代码：

function generateSnapshot() {
   var video = document.querySelector('#camera-stream');
   var hidden_canvas = document.querySelector('#canvas');
   var context = hidden_canvas.getContext('2d');

   var width = video.videoWidth;
   var height = video.videoHeight;

   if (width && height) {
       hidden_canvas.width = width;
       hidden_canvas.height = height;

       // Make a copy of the current frame in the video on the canvas.
       context.drawImage(video, 0, 0, width, height);

       // Turn the canvas image into a dataURL that can be used as a src for our photo.
       return hidden_canvas.toDataURL('image/png');
   }
}

以及Java Web服务：

hidden_canvas.toBlob(function(blob) {
    var fd = new FormData();
    fd.append('fileName', 'testBlob.png');
    fd.append('data', blob);
    sendAJAXFileUploadRequest(fd);
},'image/png');

function sendAJAXFileUploadRequest(formData) {
   $.ajax({
       type: 'POST',
       url: servicePath + "upload",
       xhrFields: {withCredentials: false},
       headers: {},
       data: formData,
       processData: false,
       contentType: false,
       success: function(data, status, xhttp) {
           alert(data);
       },
       error: function() {
           alert("Error uploading snapshot file to server!");
       }
   });          
}

@POST
@路径（“/upload”）
@使用（MediaType.MULTIPART\u FORM\u数据）
公共响应上载图片（@FormDataParam（“数据”）字节[]图像字节，@FormDataParam（“文件名”）字符串文件名）{
String uploadedFileLocation=上传文件夹+文件名；
试一试{
OutputStream out=新文件OutputStream（新文件（uploadedFileLocation））；
out.write（imageBytes）；
out.flush（）；
out.close（）；
}捕获（IOE）{
logger.severy（“无法保存文件（文件位置：“+uploadedFileLocation+”））；
返回Response.status（500）.entity（“无法保存文件
”+e.toString（））.build（）；
}
返回Response.status（200）.entity（“success”）.build（）；
}

为什么要创建

byteArrayString

然后将其解析回

imageBytes

？因为我想去掉“image/png；base64”开头，我了解到这可能会导致无效文件。这是一次不顾一切的尝试，试图使它在某种程度上有效。但是我不能

子字符串

它，因为

bytearrastring

之后看起来完全不同。图像是否也应使用此前缀有效？我怎样才能把它转换成这样一个有效的文件呢？可能是使用

toBlob（）

。这样，您就不必担心Base64、数据URL前缀或其他任何问题。使用instead而不是

toDataURL

将为您提供二进制数据，而不是Base64编码的数据URL。那么您的服务不需要做太多工作，因为它以正确的格式获取正确的数据。@Kayaman非常感谢您的耐心等待。

toBlob

的建议确实让我走上了正确的道路。我终于可以通过一些调整使它工作了（见答案）。再次感谢！

hidden_canvas.toBlob(function(blob) {
    var fd = new FormData();
    fd.append('fileName', 'testBlob.png');
    fd.append('data', blob);
    sendAJAXFileUploadRequest(fd);
},'image/png');

function sendAJAXFileUploadRequest(formData) {
   $.ajax({
       type: 'POST',
       url: servicePath + "upload",
       xhrFields: {withCredentials: false},
       headers: {},
       data: formData,
       processData: false,
       contentType: false,
       success: function(data, status, xhttp) {
           alert(data);
       },
       error: function() {
           alert("Error uploading snapshot file to server!");
       }
   });          
}

@POST
@Path("/upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadPicture(@FormDataParam("data") byte[] imageBytes, @FormDataParam("fileName") String fileName) {

    String uploadedFileLocation = UPLOAD_FOLDER + fileName;

    try {
        OutputStream out = new FileOutputStream(new File(uploadedFileLocation));
        out.write(imageBytes);
        out.flush();
        out.close();
    } catch (IOException e) {       
        logger.severe("Can not save file (file location: " + uploadedFileLocation + ")");
        return Response.status(500).entity("Can not save file<br>" + e.toString()).build();
    }

    return Response.status(200).entity("success").build();
}