Question

我有一个网站，该网站带有正在进行的网络摄像头流，应该将视频流的快照发送到我自己的 Java网络服务器。快照生成和显示功能可以在网站上完美运行。我想将带有 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!");
    }
});

正如我提到的那样，显示插入hidden_canvas.toDataURL('image/png')的{{1}}属性中的src可以很好地工作，因此绝对有效。

我在网络服务器上的服务如下：

<img>

@POST @Path("/upload") @Consumes(MediaType.MULTIPART_FORM_DATA) public Response uploadPicture(byte[] imageBytes) { String uploadedFileLocation = UPLOAD_FOLDER + "test.png"; try { OutputStream out = new FileOutputStream(new File(uploadedFileLocation)); out.write(imageBytes); out.flush(); out.close(); } catch (IOException e) { return Response.status(500).entity("Can not save file<br>" + e.toString()).build(); } return Response.status(200).entity("success").build(); }创建成功，但不是有效的Test.png，当我打开它时，它根本不显示。服务器上的文件如下所示：

我想念什么？会有其他方法来处理图像吗？

这是我的png方法。没有takeSnapshot的情况下如何发送文件？那么，在服务器端我对参数有什么期望？

toDataURL()

Answer 1

我终于可以使它工作了。 Kayaman 的toBlob建议使我步入正轨。但是我无法按预期的那样发送Blob，我不得不将其放入FormData中，因此不得不调整我的Web服务。解决方案如下：

网站 JavaScript 代码：

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!");
       }
   });          
}

和 Java Web服务：

@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();
}

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

1 个答案: