如何截取视频第一帧（含跨域问题）

柔光的暖阳◎ 2023-07-25 06:13 10阅读 0赞

> 首选创建一个视频标签

> 创建一个截取视频图片的方法

function initialize() {
            var scale = 0.8;
            var video = document.getElementById("video");;
            video.addEventListener('loadeddata', function () {
                var canvas = document.createElement("canvas"); // 创建一个画布
                canvas.width = video.videoWidth * scale;
                canvas.height = video.videoHeight * scale;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // getContext:设置画布环境；drawImage:画画
                var url = canvas.toDataURL("image/png", 1.0);//图片base64格式
                $("#picimg").attr("src", url)
            });
        }

> 上面的方法就可以视频截取第一帧了，但是如果是跨域的视频将会出现问题，为了解决跨域问题我们需要这样做

<video src="" crossorigin="anonymous" name='VideoWay' id="video" controls="controls"></video>

> 如果出现截图为白图问题，可以参照一下方法