從Java Servlet將畫布圖像保存爲png圖像文件

Question

我一直在嘗試從我的HTML頁面中將畫布圖像保存到Java Servlet中的圖像文件。我需要通過Ajax請求將圖像從HTML發送到Java Servlet。有人可以幫我嗎？我已經嘗試了以下選項

Stack Overflow Question 1

這裏，request.getPart("myImg")是返回null，因此，這是行不通的。請幫助我。

我也曾嘗試以下解決方案 Sending content of canvas to java

這裏的問題是，它給我的無效文字/長度異常在下面的行設置

BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes)); 

請幫幫忙！ ！

UPDATE：

這是我的Ajax代碼：

function uploadImage() { 
    var canvasServer = document.getElementById("canvasThumbResult"); 
    var context = canvasServer.getContext("2d");      
    var imageDataURL = canvasServer.toDataURL('image/png'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", trinityCvaServicesUrl+"common/uploadImage", true); 
    var boundary = Math.random().toString().substr(2); 
    xhr.setRequestHeader("content-type", 
     "multipart/form-data; charset=utf-8; boundary=" + boundary); 
    var multipart = "--" + boundary + "\r\n" + 
     "Content-Disposition: form-data; name=myImg\r\n" + 
     "Content-type: image/png\r\n\r\n" + 
     imageDataURL + "\r\n" + 
     "--" + boundary + "--\r\n"; 
    xhr.send(multipart);  
    /*xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xhr.send("imgData="+imageDataURL);*/ 
} 

這裏是我的Java代碼：

FileOutputStream fos = null; 
     try { 
      Part part = req.getPart("myImg"); 
      BufferedReader br = new BufferedReader(new InputStreamReader(
        part.getInputStream(), Charset.forName("utf-8"))); 

      /*String imgData = request.getParameter("imgData"); 
      BufferedReader br = new BufferedReader(new InputStreamReader(
        new ByteArrayInputStream(
          imgData.getBytes(StandardCharsets.UTF_8)), 
        Charset.forName("utf-8")));*/ 

      String sImg = br.readLine(); 
      sImg = sImg.substring("data:image/png;base64,".length()); 
      byte[] bImg64 = sImg.getBytes(); 
      byte[] bImg = Base64.decodeBase64(bImg64); 
      fos = new FileOutputStream(ReloadableProps.getProperty("local.image.save.path")+"img.png"); 
      fos.write(bImg); 

      /*String imgData = req.getParameter("imgData"); 
      String img64 = imgData.replaceAll("data:image/png;base64,", ""); 
      byte[] decodedBytes = DatatypeConverter.parseBase64Binary(img64); 
      BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes));  
      File outputfile = new File(ReloadableProps.getProperty("local.image.save.path")+"img.png"); 
      ImageIO.write(bfi , "png", outputfile); 
      bfi.flush();*/ 
     } catch (Exception e) { 
      e.printStackTrace(); 
      String loggerMessage = "Upload image failed : "; 
      CVAException.printException(loggerMessage + e.getMessage()); 
     } finally { 
      if(fos != null) { 
       fos.close(); 
      } 
     } 

Answer 1

我設法以某種方式保存圖像。不知道這是否是一種有效的方式。請評論，如果你覺得這可能不是一個有效的方式做到這一點。感謝您的反饋。

我的JavaScript代碼：

var canvasServer = document.getElementById("canvasThumbResult"); 
    var context = canvasServer.getContext("2d");      
    var imageDataURL = canvasServer.toDataURL('image/png'); 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST",trinityCvaServicesUrl+"common/uploadImage",false); 
    ajax.setRequestHeader("Content-Type", "application/upload"); 
    ajax.send(imageDataURL); 

我的Java代碼：

 InputStream in = null; 
     FileOutputStream fos = null; 
     try { 
      HttpServletRequestWrapper wrappedRequest = new HttpServletRequestWrapper(req); 
      InputStream is = wrappedRequest.getInputStream(); 
      StringWriter writer = new StringWriter(); 
      IOUtils.copy(is, writer, "UTF-8"); 
      String imageString = writer.toString(); 
      imageString = imageString.substring("data:image/png;base64," 
        .length()); 
      byte[] contentData = imageString.getBytes(); 
      byte[] decodedData = Base64.decodeBase64(contentData); 
      String imgName = ReloadableProps 
        .getProperty("local.image.save.path") 
        + String.valueOf(System.currentTimeMillis()) + ".png"; 
      fos = new FileOutputStream(imgName); 
      fos.write(decodedData); 
     } catch (Exception e) { 
      e.printStackTrace(); 
      String loggerMessage = "Upload image failed : "; 
      CVAException.printException(loggerMessage + e.getMessage()); 
     } finally { 
      if (in != null) { 
       in.close(); 
      } 
      if (fos != null) { 
       fos.close(); 
      } 
     }