Receiving binary image from client and saving it on server side

Question

I am working on a Spring-MVC application where for the clientSide I am using html2canvas function to take screenshot and then I would like to send it to server for further processing and conversion. I am posting the code for html2canvas below. So I have a controller mapping which can read byte array, but I am just unable to pass it to the server, I keep getting error(also displayed below). Finally, I would like to receive the binary image and save it in server side. Kindly let me know.

Error :

INFO: Error parsing HTTP request header
 Note: further occurrences of HTTP header parsing errors will be logged at DEBUG level.

Html2Canvas code :

 $(".description").click(function(){

               html2canvas($('body'), {

                    onrendered: function(canvas) {

                        var img = canvas.toDataURL("image/png");

                        $('<img>',{src:img}).appendTo($('#canvas-image'));

                    }

                    });

Controller code :

@RequestMapping("/convertbase/{id}")
    public String convertbase(@ModelAttribute("notices") Notes p,@PathVariable("id") byte[] id,Model model){
         byte[] data = org.apache.commons.codec.binary.Base64.decodeBase64(id);
        try {

            FileOutputStream imageoutfile = new FileOutputStream("/home/akshay/check.png");
            imageoutfile.write(data);
            imageoutfile.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    return "redirect:/note/listing";
    }

What am I doing wrong, any pointers would be helpful. Thank you for your time.

New Controller :

@RequestMapping(value = "/convertbase/{id}",method = RequestMethod.POST)
    public String convertbase(@RequestBody String body){
         byte[] b = body.getBytes();
         byte[] data = org.apache.commons.codec.binary.Base64.decodeBase64(b);
         try {

            FileOutputStream imageoutfile = new FileOutputStream("/home/akshay/check.png");
            imageoutfile.write(data);
            imageoutfile.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    return "redirect:/note/listing";
    }

Ajax request :

$(".description").click(function(){

       html2canvas($('body'), {

            onrendered: function(canvas) {

                var img = canvas.toDataURL("image/png");

                $('<img>',{src:img}).appendTo($('#canvas-image'));

                $.ajax({

                      url: '../convertbase',

                      type: 'POST',

                      data:{image:img}

                });

            }

            });

Answer 1

You are trying to pass an image in URL, right? So, in this case URL can be very long and the server just can not be able to parse such request. Regular solution is to send data using POST in request body.