如何使用ajax将canvas png图像发送到java servlet？答案

【问题标题】：How to send canvas png image to java servlet using ajax?如何使用ajax将canvas png图像发送到java servlet？
【发布时间】：2017-05-12 14:53:38
【问题描述】：

我正在尝试使用 ajax 将画布 PNG 发送到 java servlet。这是我的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()：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/plain");      
    try{
        String img64 = request.getParameter("annotationImage");
        byte[] decodedBytes = DatatypeConverter.parseBase64Binary(img64);
        BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes));    
        File outputfile = new File("saved_annotations/saved.png");
        ImageIO.write(bfi , "png", outputfile);
        bfi.flush();   
        out.print("Success!");
    }catch(IOException e){  
          out.print(e.getMessage());
    }
}

问题是getParameter("annotationImage")返回null，我不明白为什么：使用浏览器调试器我可以看到annotationImage和它在请求参数之间的值，所以我确定它不是空的，但是由于某种原因，Java Servlet 没有接收到该参数。

【问题讨论】：

stackoverflow.com/questions/3831680/…

标签： javascript java ajax servlets canvas

【解决方案1】：

我找到了它不起作用的原因。为了避免解析 JSON，我在不设置任何参数的情况下将数据发送到服务器，写入 data: image 而不是 JSON 格式的 data: {annotationImage: image} 以避免在 servlet 中解析 JSON。

在 java servlet 中，我获取了整个请求正文，删除了 content-type 声明，最后解码并保存了图像。代码如下：

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

【讨论】：