前端实现视频封面的截取

部分html

<video id="ppVideo" controls width="300" heigth="300" 
controlslist="nodownload" 
src="/xxx/xxx.mp4">您的浏览器不支持 video 标签。</video>

<button type="button" id="interception">获取视频封面</button>

<img id="VideoPoster" src="">

$('#interception').on('click',function(){
       var video = $('#ppVideo').get(0);
       if (video.currentTime <= 0) {
           alert('请播放视频，在合适的位置点击该按钮');
           return;
       }
       var scale = 0.25;//比例
       var canvas = document.createElement("canvas");//创建一个画布对象
       canvas.width = video.videoWidth * scale;//封面图片的宽采用视频宽度的0.25倍
       canvas.height = video.videoHeight * scale;//同上
       canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//生成图片
       $('#VideoPoster').attr('src', canvas.toDataURL());//设置图片的base64格式数据流
       
})

html的变化

<img id="VideoPoster" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAUAAAAC0CAYAAADl5PURAAAY1
UlEQVR4Xu2d6ZLbSA6EJfm3vTOe939TW9pgq9lNFkUmsoC6qH
TExsY0UQeygE9g8br+/PnrcblcLtfrdfq/y+Px8Z9f/+a/z39
Ij6+MF/2kf+/lv3/cfvQylZfzuN6e66B/rxV43JP4JPX68+dP
U2mt8ff3/jdknihfQwYJ7KT2fK8CYODqBXQlAB6LKAByQVYbK
Nzstta15/sFwLkKHL0CtP7C............很长省略
</img>

非常简单，这样就得到了视频封面，想要上传到服务器就把base64数据流取出来处理就行了，下面是C#方式处理

public string SaveBase64ToImage()
{
   string base64 = Context.Request["base64"] ?? "";//前端传过来的base64数据流
   string imgbase64 = base64.Substring(base64.IndexOf(",") + 1);//过滤掉逗号前面的部分，包括逗号
   Guid guid = new Guid();
   guid = Guid.NewGuid();
   var imgName = guid.ToString();//用Guid当做图片文件的名称
   string filename = "";
   Bitmap bitmap = null;
   try
   {
        byte[] arr = Convert.FromBase64String(imgbase64);
        System.IO.MemoryStream ms = new System.IO.MemoryStream(arr);
        Bitmap bmp = new Bitmap(ms);
        ms.Close();//关闭当前流
        bitmap = bmp;
        filename = "Files/video/" + imgName + ".png";//所要保存的相对路径及名字              
        var path =  Context.Server.MapPath("/");//获取项目的完整路径
        string imgUrl = (path + filename).Replace("\\", "/"); //得到最终上传路径 
        bitmap.Save(imgUrl , System.Drawing.Imaging.ImageFormat.Png);//保存到服务器
    }
    catch (Exception e)
    {

    }
    return filename;//返回相对路径
}

前端实现 视频封面的截取

猜你喜欢

前端实现视频封面的截取