Saving HTML5 canvas to Java server
Posted on 12 July 2012
If you are working with HTML5 Canvas element and are looking to save the generated PNG file back on to the server via Java - it is not as easy as saving the byte array. The reason that the generated PNG data is URL encoded and is prefixed with the dataURI format headers.
var canvas = document.getElementById('#myCanvas');
var pngData = canvas.toDataURL('image/png');
The following code will convert the raw bytes by stripping off the headers, and coverting the Base64 encoded data to the raw PNG bytes.
private void saveImage(byte[] pngData) {
String png = new String(pngData);
String find = "base64%2C";
String tokens = png.substring(png.indexOf(find) + find.length());
String decoded = StringUtils.replace(tokens, "%2F", "/");
byte[] bytes = new Base64Encoder().decode(decoded);
// save the generated bytes
// which can then be read in a BufferedImage
BufferedImage image = ImageIO.read(new ByteArrayInputStream(bytes));
// mroe code
}
Hope this helps.