title: Highcharts and Java: saving image on server side
body: <p>I'm trying to save a Highcharts charts as png image on server side. I found <a href="http://www.blog.openshell.in/2014/08/how-to-save-an-image-of-the-highcharts-on-the-server/" rel="nofollow">this link</a> where it shows how to use jQuery to submit the image as a string, and php to generate the file. I'm trying to replace php with a Java servlet on the server side.</p>
  
  <p>The servlet receives the string and the image file is generated with 47K but it is blank.</p>
  
  <p>Is the servlet converting the string correctly? <code>System.out.println</code> is showing the string as submitted by the client.</p>
  
  <pre><code>protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
      String strFile = request.getParameter("bin_data");
      strFile.replace(' ', '+');
      System.out.println("***"+strFile);
      byte[] decoded = DatatypeConverter.parseBase64Binary(strFile);
      try (OutputStream stream = new FileOutputStream("d:/abc.png")) {
          stream.write(decoded);
      }
  }
  </code></pre>
  
  <p>UPDATE: </p>
  
  <p>This is the jQuery on the client side that submits the image string:</p>
  
  <pre><code>    $("#save_img").click(function(){
          var svg = chart.getSVG(); 
          canvg(document.getElementById('canvas'),svg);
          var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
          img = img.replace('data:image/png;base64,', '');
          var data = "bin_data=" + img;
          $.ajax({
            type: "POST",
            url: "/storeimg",  // this is the servlet url
            data: data,
            success: function(data){
              alert('success');
            }
          });
      });
  </code></pre>
  
  <p>where chart is</p>
  
  <pre><code>chart = new Highcharts.Chart({
      ....
      ....
  });
  </code></pre>
  
  <p>UPDATE: code works well with fix described in the answer</p>