如何在本地磁盘上保存视频帧？

编程问答 2022-05-11

问题描述

我正在从视频中提取帧，它在画布上提取和显示所有帧意味着在网络浏览器上。我正在尝试使用 local-storage .set Item 将该帧保存在磁盘上，但不起作用，请帮忙，我想将该帧保存在我的本地磁盘上。如何做到这一点，我的代码如下所示：

<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
    <source src="180419_Boxing_17_13.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

<p>These are the frames' images generated by getVideoImage():</p>
<ol id="olFrames"></ol>

<script type="text/JavaScript">
    function getVideoImage(path,secs,callback) {
        var me = this,video = document.createElement('video');
        video.onloadedMetadata = function() {
            if ('function' === typeof secs) {
                secs = secs(this.duration);
            }
            this.currentTime = Math.min(Math.max(0,(secs < 0 ? this.duration : 0) + secs),this.duration);
        };
        video.onseeked = function(e) {
            var canvas = document.createElement('canvas');
            canvas.height = video.videoHeight;
            canvas.width = video.videoWidth;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video,500,500);
            var img = new Image();
            img.src = canvas.toDataURL();
            callback.call(me,img,this.currentTime,e);

            var data = ctx.getimageData(x,y,img.width,img.height).data;
            localStorage.setItem('image',data);

        };
        video.onerror = function(e) {
            callback.call(me,undefined,e);
        };
        video.src = path;
    }

    function showImageAt(secs) {
        var duration;
        getVideoImage(
            '180419_Boxing_17_13.mp4',function(totalTime) {
                duration = totalTime;
                return secs;
            },function(img,event) {
                if (event.type == 'seeked') {
                    var li = document.createElement('li');
                    li.innerHTML += '<b>Frame at second ' + secs + ':</b><br />';
                    li.appendChild(img);
                    document.getElementById('olFrames').appendChild(li);
                    if (duration >= ++secs) {
                         showImageAt(secs);
                    };
                }
            }
        );
    }
    showImageAt(0);
</script>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

frameframeframehtmljavascriptsavevideovideo