Javascript 如何使用ajax将画布png图像发送到Javaservlet？

我正在尝试使用ajax将画布PNG发送到Javaservlet。 以下是我的javascript代码：

function sendToServer(image){   
$.ajax({
    type: "POST",
    url: "SaveAnnotation",
    data: {
        annotationImage: image
        },
    success: function(msg)
    {                       
            alert(msg);
    },
    error: function()
    {
        alert("Error connecting to server!");
    }
}); 
}

function save() {
var dataURL = canvas.toDataURL();
sendToServer(dataURL);
}

以及java servlet doPost（）：

---

问题是

getParameter（“annotationImage”）

返回

null

，我不明白为什么：使用浏览器调试器，我可以看到

annotationImage

及其在请求参数之间的值，所以我确定它不是null，但是由于某些原因，Java Servlet没有接收到该参数。

我找到了它不起作用的原因。 为了避免解析JSON，我在不设置任何参数的情况下将数据发送到服务器，写入

data:image

而不是JSON格式的

数据：{annotationImage:image}

，以避免在servlet中解析JSON

在Javaservlet中，我获得了整个请求体，删除了内容类型声明，最后解码并保存了图像。代码如下：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    response.setContentType("text/plain");

    StringBuffer jb = new StringBuffer();
    String line = null;
    BufferedReader reader = request.getReader();
    while ((line = reader.readLine()) != null)
        jb.append(line);

    String img64 = jb.toString();   
    //check if the image is really a base64 png, maybe a bit hard-coded
    if(img64 != null && img64.startsWith("data:image/png;base64,")){
        //Remove Content-type declaration
        img64 = img64.substring(img64.indexOf(',') + 1);            
    }else{
        response.setStatus(403);
        out.print("Formato immagine non corretto!");
        return;
    }   
    try{
        InputStream stream = new ByteArrayInputStream(Base64.getDecoder().decode(img64.getBytes()));  
        BufferedImage bfi = ImageIO.read(stream);
        String path = getServletConfig().getServletContext().getRealPath("saved_annotations/saved.png");
        File outputfile = new File(path);
        outputfile.createNewFile();
        ImageIO.write(bfi , "png", outputfile);
        bfi.flush();
        response.setStatus(200);
        out.print("L'immagine e' stata salvata con successo!");         
    }catch(IOException e){  
        e.printStackTrace();
        response.setStatus(500);
        out.print("Errore durante il salvataggio dell'immagine: " + e.getMessage());      
    }
}

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    response.setContentType("text/plain");

    StringBuffer jb = new StringBuffer();
    String line = null;
    BufferedReader reader = request.getReader();
    while ((line = reader.readLine()) != null)
        jb.append(line);

    String img64 = jb.toString();   
    //check if the image is really a base64 png, maybe a bit hard-coded
    if(img64 != null && img64.startsWith("data:image/png;base64,")){
        //Remove Content-type declaration
        img64 = img64.substring(img64.indexOf(',') + 1);            
    }else{
        response.setStatus(403);
        out.print("Formato immagine non corretto!");
        return;
    }   
    try{
        InputStream stream = new ByteArrayInputStream(Base64.getDecoder().decode(img64.getBytes()));  
        BufferedImage bfi = ImageIO.read(stream);
        String path = getServletConfig().getServletContext().getRealPath("saved_annotations/saved.png");
        File outputfile = new File(path);
        outputfile.createNewFile();
        ImageIO.write(bfi , "png", outputfile);
        bfi.flush();
        response.setStatus(200);
        out.print("L'immagine e' stata salvata con successo!");         
    }catch(IOException e){  
        e.printStackTrace();
        response.setStatus(500);
        out.print("Errore durante il salvataggio dell'immagine: " + e.getMessage());      
    }
}