Saving HTML5 canvas to Java server
with 2 comments
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.
Comments
2 responses to ' Saving HTML5 canvas to Java server '
-
Hi How you doing,
can you help me on this
from javascript i am sending canvas data using ajax:
function saveDataURL(a) {
var postData = "canvasData="+encodeURIComponent(a);
var ajax = new XMLHttpRequest();
ajax.open("POST",'uploadPhoto.cgi',true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send(postData);
}
in java i have followed your code done this way :
String png = new String(request.getParameter("canvasData"));
String find = "base64%2C";
String tokens = png.substring(png.indexOf(find) + find.length());
String decoded = StringUtils.replace(tokens, "%2F", "/");
Base64 decoder = new Base64();
byte[] imgBytes = decoder.decodeBase64(decoded);
InputStream in = new ByteArrayInputStream(imgBytes);
BufferedImage bImageFromConvert = ImageIO.read(in);
Random rand = new Random();
File file = new File(""+rand+"yourImage.png");
ImageIO.write(bImageFromConvert, "png", file);
System.out.println(file.getAbsolutePath());
But its always giving me this error
java.lang.IllegalArgumentException: im == null!
at javax.imageio.ImageIO.write(ImageIO.java:1457)
at javax.imageio.ImageIO.write(ImageIO.java:1521)
at com.app.videoediting.videoupload.UploadImage.doPost(UploadImage.java:58)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:304)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:224)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:164)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.ha.tcp.ReplicationValve.invoke(ReplicationValve.java:333)
at org.apache.catalina.ha.session.JvmRouteBinderValve.invoke(JvmRouteBinderValve.java:219)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:405)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:279)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:515)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:300)
at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(ThreadPoolExecutor.java:886)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:908)
at java.lang.Thread.run(Thread.java:619)\
can you help me as i need to complete this, any kind of help much appreciated -
i really like that you are giving information on core and advance java concepts. Being enrolled at http://www.wiziq.com/course/1779-core-and-advance-java-concepts i found your information very helpful indeed.thanks for it.
Posts
