将画布图像从Java Servlet保存到png图像文件中

时间:2014-06-10 16:36:40

标签: java html5 servlets image-processing canvas

我一直在尝试将画布图像从HTML页面保存到Java Servlet中的图像文件。我需要通过Ajax请求将图像从HTML发送到Java Servlet。有人可以帮帮我吗?我已经尝试了以下选项

Stack Overflow Question 1

这里,request.getPart("myImg")返回null,因此无效。请帮帮我。

我也尝试过以下解决方案 Sending content of canvas to java

这里的问题是它给了我一个例外无效的文字/长度集在下一行

BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes)); 

请帮助!!

更新:

这是我的Ajax代码:

function uploadImage() {
    var canvasServer = document.getElementById("canvasThumbResult");
    var context = canvasServer.getContext("2d");                    
    var imageDataURL = canvasServer.toDataURL('image/png');

    var xhr = new XMLHttpRequest();
    xhr.open("POST", trinityCvaServicesUrl+"common/uploadImage", true);
    var boundary = Math.random().toString().substr(2);
    xhr.setRequestHeader("content-type", 
        "multipart/form-data; charset=utf-8; boundary=" + boundary);
    var multipart = "--" + boundary + "\r\n" +
        "Content-Disposition: form-data; name=myImg\r\n" +
        "Content-type: image/png\r\n\r\n" +
        imageDataURL + "\r\n" +
        "--" + boundary + "--\r\n";
    xhr.send(multipart);    
    /*xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send("imgData="+imageDataURL);*/
}

这是我的Java代码:

FileOutputStream fos = null;
        try {
            Part part = req.getPart("myImg");
            BufferedReader br = new BufferedReader(new InputStreamReader(
                    part.getInputStream(), Charset.forName("utf-8")));

            /*String imgData = request.getParameter("imgData");
            BufferedReader br = new BufferedReader(new InputStreamReader(
                    new ByteArrayInputStream(
                            imgData.getBytes(StandardCharsets.UTF_8)),
                    Charset.forName("utf-8")));*/

            String sImg = br.readLine();
            sImg = sImg.substring("data:image/png;base64,".length());
            byte[] bImg64 = sImg.getBytes();
            byte[] bImg = Base64.decodeBase64(bImg64); 
            fos = new FileOutputStream(ReloadableProps.getProperty("local.image.save.path")+"img.png");
            fos.write(bImg);

            /*String imgData = req.getParameter("imgData");
            String img64 = imgData.replaceAll("data:image/png;base64,", "");
            byte[] decodedBytes = DatatypeConverter.parseBase64Binary(img64 );
            BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes));    
            File outputfile = new File(ReloadableProps.getProperty("local.image.save.path")+"img.png");
            ImageIO.write(bfi , "png", outputfile);
            bfi.flush();*/
        } catch (Exception e) {
            e.printStackTrace();
            String loggerMessage = "Upload image failed : ";
            CVAException.printException(loggerMessage + e.getMessage());
        } finally {
            if(fos != null) {
                fos.close();
            }
        }

1 个答案:

答案 0 :(得分:2)

我设法以某种方式保存图像。不确定这是否是一种有效的方法。如果您认为这可能不是一种有效的方法,请发表评论。感谢您的反馈。

我的JavaScript代码:

    var canvasServer = document.getElementById("canvasThumbResult");
    var context = canvasServer.getContext("2d");                    
    var imageDataURL = canvasServer.toDataURL('image/png');
    var ajax = new XMLHttpRequest();
    ajax.open("POST",trinityCvaServicesUrl+"common/uploadImage",false);
    ajax.setRequestHeader("Content-Type", "application/upload");
    ajax.send(imageDataURL);

我的Java代码:

        InputStream in = null;
        FileOutputStream fos = null;
        try {
            HttpServletRequestWrapper wrappedRequest = new HttpServletRequestWrapper(req);
            InputStream is = wrappedRequest.getInputStream();
            StringWriter writer = new StringWriter();
            IOUtils.copy(is, writer, "UTF-8");
            String imageString = writer.toString();
            imageString = imageString.substring("data:image/png;base64,"
                    .length());
            byte[] contentData = imageString.getBytes();
            byte[] decodedData = Base64.decodeBase64(contentData);
            String imgName = ReloadableProps
                    .getProperty("local.image.save.path")
                    + String.valueOf(System.currentTimeMillis()) + ".png";
            fos = new FileOutputStream(imgName);
            fos.write(decodedData);
        } catch (Exception e) {
            e.printStackTrace();
            String loggerMessage = "Upload image failed : ";
            CVAException.printException(loggerMessage + e.getMessage());
        } finally {
            if (in != null) {
                in.close();
            }
            if (fos != null) {
                fos.close();
            }
        }