我在画布上画了一幅风景画。我需要一个与用户的绘图图像保存在服务器(本地磁盘)时,按钮被单击。但它不起作用。代码:
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;
}
暂无答案!
目前还没有任何答案,快来回答吧!