有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

javascript如何在java servlet中接收画布`toDataURL()`?

不知何故,我正在通过相机拍摄画布图像,并将其canvas.toDataURL()发送到服务器,以便服务器可以将其保存为png文件,在我提到问题之前,这里是我的代码:

var dataURL = canvas.toDataURL("image/png");
    formdata = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    alert(formdata);
    $.ajax({
        url: '../canvasdopost',
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        success: function(data){

        }
    });

服务器:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     Part part = request.getPart("canvasdata");
      BufferedReader br = new BufferedReader(new InputStreamReader(part.getInputStream(),
          Charset.forName("utf-8")));
      String sImg = br.readLine();
      System.out.print(sImg);
}

服务器控制台输出:

java.lang.IllegalStateException: Unable to process parts as no multi-part configuration has been provided at org.apache.catalina.connector.Request.parseParts(Request.java:2733)

我还尝试:

String test = request.getReader().lines().collect(Collectors.joining(System.lineSeparator()));
System.out.print(test);

现在的问题是,在发送数据之前,我从未让服务器控制台输出在客户端警报框中得到的内容

也感谢那些告诉我如何将收到的base64数据保存到实际图像文件中的人


共 (1) 个答案

  1. # 1 楼答案

    对于那些面临同样问题的人

    就这么简单:

    服务器:

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String test = request.getReader().lines().collect(Collectors.joining(System.lineSeparator()));
        System.out.print(test);
        byte[] bImg64 = test.getBytes();
        byte[] bImg = Base64.decodeBase64(bImg64); // apache-commons-codec
        FileOutputStream fos = new FileOutputStream("D:\\img.png");
        fos.write(bImg);
        fos.close();
    }
    

    客户:

    var dataURL = canvas.toDataURL("image/png");
    formdata = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    $.ajax({
        url: '../signupcanvasdopost',
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: "text/html",
        success: function(data){
    
        }
    });