将画布图像发送到spring引导控制器

9gm1akwq  于 2021-07-13  发布在  Java
关注(0)|答案(0)|浏览(197)

我在画布上画了一幅风景画。我需要一个与用户的绘图图像保存在服务器(本地磁盘)时,按钮被单击。但它不起作用。代码:

Code view

<canvas id="imageLoaderBreak" name="imageLoaderBreak"   width="1" height="1"> </canvas>

        <button  type="button" class="btn btn-success">Загрузить изображение на сервер</button>
        <button id="subbtm" type="submit" class="btn btn-success">Зарегистрировать заявку</button>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
            function saveCanvasImage() {
                var canvas = document.getElementById("imageLoaderBreak");
                var imageData = canvas.toDataURL();

                $.ajax({
                    url: '/saveCanvasImage',
                    data: { imageBase64: imageData },
                    type: 'POST',
                    dataType: 'JSON',
                    timeout: 10000,
                    async: false
                });

            }
            var subbtm = document.getElementById('subbtm');
            subbtm.onclick = saveCanvasImage();
        </script>

代码控制器:

private static String UPLOADED_FOLDER = "C://Users//Egor//Desktop//webHcsTask//src//main//resources//picture//";
////////
 @RequestMapping(value = "/saveCanvasImage",
            method = RequestMethod.POST)
    public  @ResponseBody  String  saveCanvasImage(@RequestParam(value="imageBase64")
                                                               String imageData,
                                                   @RequestParam String imageLoaderBreak,
                                                   @ModelAttribute UploadForm form) throws IOException {

        byte[] image = Base64.getDecoder().decode(imageLoaderBreak);

            Path path = Paths.get(UPLOADED_FOLDER +  "extension.png");
            Files.write(path, image);
            return "success ";

    }

有一个选择使用这种方法,但它不适合我

@RequestMapping(value = "/controller/path/saveCanvasImage", method = RequestMethod.POST)
@ResponseBody public Map<String,Object> saveCanvasImage(
        @RequestParam(value="imageBase64", defaultValue="")String imageBase64) {
    Map<String,Object> res = new HashMap<String, Object>();

    File imageFile = new File("/home/data/canvasImage.png");
    try{
        byte[] decodedBytes = DatatypeConverter.parseBase64Binary(imageBase64.replaceAll("data:image/.+;base64,", ""));
        BufferedImage bfi = ImageIO.read(new ByteArrayInputStream(decodedBytes));
        ImageIO.write(bfi , "png", imageFile);
        bfi.flush();
        res.put("ret", 0);
    }catch(Exception e){
        res.put("ret", -1);
        res.put("msg", "Cannot process due to the image processing error.");
        return res;
    }

    return res;
}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题