video用canvas实现截图和上传

开通博客这么久一直没有写什么，现在对自己在学习中用到的方法总结，方便自己也希望能帮助到别人。

我之前在再项目中实现了利用canvas对video进行截图并保存，我的思路是通过canvas的drawImage方法绘制截图，然后通过canvas.toDataURL('image/png');方法保存为图像。图像为“data:image/png;base64,iVBORw0KGgoAAAAN......”这样的字符串，经过post传输方式传到服务器，将“data:image/png;base64,iVBORw0KGgoAAAANSU......"截取为”iVBORw0KGgoAAAANSUhEUgAAAe“ 字符串，再用BASE64Decoder解码结合FileOutputStream保存到服务器重指定路径。具体代码如下：

1.前台页面中合适位置写入：

<!-设置video和canvas标签，video中controls="ture" ： 带播放控件，loop="loop" 循环播放，autoplay="autoplay" ： 加载后自动播放，height，width：高和宽

canvas：style中设置画布样式，我根据自己需要不显示-->

<video id="media" src="../${sessionScope.danchapte