Html5 canvas生成图片，通过java进行保存

最新推荐文章于 2025-05-25 09:53:08 发布

原创最新推荐文章于 2025-05-25 09:53:08 发布 · 9.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #java #canvas

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas元素截图并获取图片的Base64编码数据，然后利用Ajax将数据发送到服务器端（Java实现）。服务器端接收到Base64编码的图片数据后，对其进行解码并保存为PNG格式。

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

找到canvas对象，通过canvas对象的toDataURL获取图片信息

var canvas = document.getElementById("vjs-key-frame");
var dataURL = canvas.toDataURL("image/png");

得到的图片信息如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICA…
需要截取掉前面的内容：data:image/png;base64,（注意有逗号）

var imageDateB64 = keyFrameDataUrl.substring(22);

然后用ajax将截取后的数据传到后台
这里是用的JAVA，得到数据后转码，因为canvas给返回的数据是base64编码的数据，解码后生成图片

BASE64Decoder decoder = new BASE64Decoder();
byte[] b = decoder.decodeBuffer(imageDataurl);//转码得到图片数据

ByteArrayInputStream bais = new ByteArrayInputStream(b);
BufferedImage bi1 = ImageIO.read(bais);

File w2 = new File("D://test.png");

ImageIO.write(bi1, "png", w2);