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

找到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);
  • 8
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 12

打赏作者

小虫hh

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值