Sending the contents of a canvas to a Java server and saving it as an image

Question

Okay, basically I've developed a simple image upload system. The user selects a local image (using the HTML5 File / FileReader API) and has the ability to crop it before confirming the result.

The final result is viewed in a canvas so to send it to the server I'm using toDataURL. The backend server is a NodeJS server which then needs to make a REST call to a Java server which will create an image file from the data and save it to disk.

The results of toDataURL are in the form: data:image/png;base64, ENCODED DATA.

What would I need on the Java server to convert the string into it's proper binary representation?

See: http://stackoverflow.com/questions/469695/decode-base64-data-in-java — Simon Sarris, Jan 09 '12 at 21:51
possible duplicate of [Uploading 'canvas' image data to the server](http://stackoverflow.com/questions/1590965/uploading-canvas-image-data-to-the-server) — , Jan 09 '12 at 21:53

score 7 · Accepted Answer · edited May 23 '17 at 10:28

7

You need to remove the data:image/png;base64, part and base 64 decode the rest.

edited May 23 '17 at 10:28

Community

1
1

answered Jan 09 '12 at 21:49

copy

3,301
2
29
36

score 5 · Answer 2 · answered Jun 22 '12 at 15:22

import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.File;
import javax.imageio.ImageIO;
import javax.xml.bind.DatatypeConverter;

public class test {
    public static void main (String[] args){
     try{
            // remove data:image/png;base64, and then take rest sting
            String img64 = "64 base image data here";
        byte[] decodedBytes = DatatypeConverter.parseBase64Binary(img64 );
        BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes));    
        File outputfile = new File("saved.png");
        ImageIO.write(bfi , "png", outputfile);
        bfi.flush();
     }catch(Exception e)
         {  
          //Implement exception code    
     }

    }
}

Solomon Tesfaye · Answer 3 · 2018-02-09T06:09:56.107

1

You have to replace space with + if your base64Image have space char, then you have to remove data:image/png;base64, from the beginning of the base64Image. Unless you replace space char, you can't get correct Image. then you can use Base64 decode

yourBase64String = yourBase64String.replace(' ', '+');

yourBase64String = yourBase64String.substring(22);

edited Feb 09 '18 at 06:09

answered Feb 09 '18 at 06:04

Solomon Tesfaye

186
2
10

score 1 · Answer 4 · edited May 23 '17 at 12:18

1

Once you Base64-decode the string, you will have the binary image, in the form of a PNG file. See this SO question for details on how to decode a base64 string into bytes.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 09 '12 at 21:50

dgvid

26,293
5
40
57

Sending the contents of a canvas to a Java server and saving it as an image

4 Answers4

Linked