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.danchapter.chContent}" controls="ture" loop="loop"   height="100%" width="100%" autoplay="autoplay">视频走丢了。。</video>
      <canvas style="display:none"></canvas>

2.js函数中截图并传到服务器

function jietu(){
var video = document.getElementById("media");//获取前台要截图的video对象，
var canvas = document.querySelectorAll('canvas')[0];//获取前台的canvas对象，用于作图
var ctx = canvas.getContext('2d');//设置canvas绘制2d图，
var width = 480;//设置canvas宽
var height = 270;//设置canvas高
canvas.width = width;
canvas.height = height;
ctx.drawImage(video, 0, 0, width, height);//将video视频绘制到canvas中
var images = canvas.toDataURL('image/png');//canvas的api中的toDataURL（）保存图像
$.post("comment_shengcheng",{images:images},function(data){//将数据发以post方式，发送到服务器，"comment_shengcheng"：struts2的通配方式（Action名_处理方法名）
  if(parseInt($.trim(data))==1){//传回数据做判断是否成功
   console.info("视屏保存成功");
  }else{
   console.info("视频保存失败");
  }
 });
}

3.我使用的struts2中action方式，如果是servlet方式思想一样。

public String shengcheng(){
byte[] buffer;//图像转换的目的字节数组
String yuliu1="upload/screen_" + new Date().getTime() + ".png";//对应服务器中保存文件的名字
String ab=images.substring(22);//images为图片字符串数据，通过spring方式获取，在这里截去字符串中”data:image/png;base64,“，使其格式正确
BASE64Decoder base64=new BASE64Decoder();  //新建64位解码器
try {
buffer = base64.decodeBuffer(ab);//64位解码到字节数组中
//写进文件  创建一个向具有指定名称的文件中写入数据的输出文件流。创建一个新 FileDescriptor 对象来表示此文件连接。
String sdPath=ServletActionContext.getServletContext().getRealPath("");//获得服务器中项目上一层路径，即是web的根路径，这里用的tomcat。
FileOutputStream fos=new FileOutputStream(new File(sdPath.substring(0,sdPath.lastIndexOf("\\"))+"/"+yuliu1)); //设置好保存路径，创建文件输出流。
fos.write(buffer);  //写入
fos.flush();  //刷新
fos.close();  //关闭
fos=null;//释放

} catch (IOException e) {
e.printStackTrace();
}

}

以上是我的操作，实现方式比较简单，希望大家多指点。