js上传视频获取第一帧截图

最新推荐文章于 2024-06-08 17:13:02 发布

炳文小萌新

最新推荐文章于 2024-06-08 17:13:02 发布

阅读量1.5k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_40394596/article/details/131562112

版权

该文描述了如何从本地file对象获取视频url，然后创建video标签播放视频，并在视频加载完成后利用canvas捕获第一帧画面，将其转换为base64格式的数据流。这个过程涉及到了浏览器的API如createObjectURL和canvas的drawImage方法，以及事件监听onloadeddata。

摘要由CSDN通过智能技术生成

1.获取视频的url,如果是file文件，先转成url

file转url方法：

        function getFileURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }

2.创建video标签，将视频url赋给src,然后再创建画布canvas，将视频的第一帧画到画布上，最后通过canvas.toDataURL('image/png')获取图片的base64文件流。

function getVideoScreenShot(url){
            var listHtml = '<video id="video" class="video" controls="controls">'+
                '<source src="'+url+'">'+
                '</video>'+
                '<div class="output"></div>';
            $('.big-box').append(listHtml);
            //创建画布
            var canvas = document.createElement('canvas')
            var video = $('.video')[0];
            video.preload = true;
            video.autoplay = true;
            video.muted = true;
            video.setAttribute('crossOrigin', 'anonymous');
            //设置画布的宽和高，
            canvas.width = 385;
            canvas.height = 200;
            video.onloadeddata = (() => {
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
                var dataURL = canvas.toDataURL('image/png');
                ... 
                // 删除掉不需要的video标签部分
                $('.big-box .video').remove();
             })

}

3.获取到dataURL后，一般在video.onloadeddata方法里进一步对dataURL做接下来的操作，video.onloadeddata方法有延迟，如果直接返回dataURL，或返回undefind。