javascript获取视频封面

最新推荐文章于 2024-05-21 23:21:19 发布

proud1212

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量135

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_44309299/article/details/137630216

版权

const toBlob = async function (file) {
    return new Promise((resolve, reject) => {
        // 选取视频的第x帧图片作为封面 start
        let videoss = document.createElement('video');
        var canvas = document.createElement('canvas');
        videoss.src = URL.createObjectURL(file);
        videoss.setAttribute('crossOrigin', 'anonymous'); //处理跨域
        videoss.currentTime = 5; // 第x帧
        videoss.addEventListener("loadedmetadata", function () { });
        videoss.addEventListener('canplay', function () {
            var ctx = canvas.getContext('2d');
            let clientWidth = videoss.videoWidth; //canvas的尺寸和图片一样
            let clientHeight = videoss.videoHeight;
            canvas.width = clientWidth;
            canvas.height = clientHeight;
            canvas.getContext("2d").drawImage(videoss, 0, 0, clientWidth,
                clientHeight); //绘制canvas
            //转为base64
            canvas.toBlob((blob) => {
                const url = URL.createObjectURL(blob);
                let obj = {}
                obj.Blob = blob;
                obj.name = url
                resolve(obj)
            }, "image/jpeg",);
        });
        // 选取视频的第x帧图片作为封面 end
    })
}