前端截取视频第一帧作为封面

复制代码
getVideoBase64(url) {
                return new Promise(function(resolve, reject) {
                    let dataURL = '';
                    let video = document.createElement("video");
                    video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
                    video.setAttribute('src', url);
                    video.setAttribute('width', 750);
                    video.setAttribute('height', 750);
                    video.setAttribute('preload', 'auto');
                    video.addEventListener('loadeddata', function() {
                        let canvas = document.createElement("canvas"),
                            width = video.width, //canvas的尺寸和图片一样
                            height = video.height;
                        canvas.width = width;
                        canvas.height = height;
                        canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                        dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
                        resolve(dataURL);
                    });
                })
            },
//转为file 进行上传 dataURLtoFile(dataurl, filename
= 'file') { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) },
复制代码

 

posted @   醉肆意  阅读(568)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示