使用Aajx将Canvas传入后台

最新推荐文章于 2023-08-15 17:38:59 发布

凤小姐

最新推荐文章于 2023-08-15 17:38:59 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013844327/article/details/53996725

本文介绍如何利用Ajax技术将前端Canvas绘制的图像数据发送到Java后台进行处理。通过jQuery库实现Ajax请求，后台接收到数据后进行存储或进一步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    1：前端代码。

    // 获取Canvas的编码。
    var imgData = document.getElementById("canvas").toDataURL("image/jpeg");
    // 上传到后台。
    $.ajax({
         type: "post",       
         url:"$!front_url/uploadImg",
         data: {image : imgData},
         async: true,
         success: function (htmlVal) {
               alert("另存图片成功！");
         },
	error: function(data) {
               alert(e.responseText); //alert错误信息 
        }
    });

// 2.Java代码, 此代码在后期改为了上传5张图片，循环保存的，大家需要根据自己需求改改就行。

@RequestMapping(value = "portal/upLoadImage")

@ResponseBody

public Object uploadImg(String id, String image1, String image2, String image3, String image4, String image5, HttpServletRequest request, HttpServletResponse response) {

response.setHeader("Access-Control-Allow-Origin", "*");
Map<String, Object> map = new HashMap<String, Object>();
Base64 base64 = new Base64();
try {

// 获取上传文件的BASE编码。
String[] imgs = {image1, image2, image3, image4, image5};

File file = new File(basePath + "/" + id);
// 判断文件是否存在。
if(!file.exists()) {
// 新建文件夹。
file.mkdirs();
}

// 循环保存图片。
int count = 0;
List<String> urlList = new ArrayList<String>();
for (int i = 0; i < imgs.length; i++) {
if(null != imgs[i]) {
byte[] k = base64.decode(imgs[i].substring("data:image/jpeg;base64,".length()));
InputStream is = new ByteArrayInputStream(k);
String fileName = UUID.randomUUID().toString().replace("-", "");
String imgFilePath = basePath + "/" + id + "/" + fileName + ".jpg";
BufferedImage imageB = ImageIO.read(is);
boolean flag = ImageIO.write(imageB, "jpg", new File(imgFilePath));
System.out.println(imgFilePath + " ------- " + flag);
if(flag) {
count++;
urlList.add("http://10.0.10.16:8080/uploads/" + id + "/" + fileName + ".jpg");
}
}
}

map.put("code", 0);
map.put("count", count);
map.put("url", urlList);
} catch (Exception e) {
logger.error("图片上传:", e);
}
return map;
}