Question

在我的应用程序中，我使用隐藏的视频播放器作为源并逐帧复制到画布中，以便我可以编辑/裁剪等。

它已经运行了一年......但是自从10天左右以来，我一直在使用谷歌浏览器出现奇怪的行为：

在每一帧中，内存不断增加，并且永远不会释放。在任务管理器中，我可以看到分配给该进程的内存上升到700MB，最终停止增长，但此时页面速度非常慢，我必须关闭浏览器选项卡

我百分百肯定，1个月前这没有发生（我看了当时的表现并且记忆不变）我100％确定导致内存增长的操作是画布上的drawImage（注释掉单行代码将消除问题）这不是在firefox上发生的

还有其他人在体验吗？

谷歌浏览器的新版本是否存在错误？

该方面的一方如何强制释放内存？

我尝试删除画布以及对它的任何引用，但它没有意义。

对于想要尝试的人，这是重现问题所需的最少代码。当视频开始播放画布时，会创建一个带有视频播放器的页面并将其附加到正文并复制每个帧。

的index.html：

<html>
    <body>
        <video id="VideoElement" controls>
            <source src="test.webm"
                    type='video/webm; codecs="vorbis,vp8"'/>
        </video>
    </body>
    <script src="code.js"></script>
</html>

code.js：

    var VideoManager = (function () {
    function VideoManager() {
        var _this = this;
        this.canvas = null;
        this.videoElement = null;
        this.context = null;
        this.videoElement = document.getElementById('VideoElement');
        this.videoElement.addEventListener('timeupdate', function () {
            _this.copyFrame();
        }, false);
    }

    VideoManager.prototype.copyFrame = function () {
        if (!this.canvas) {
            this.canvas = document.createElement("canvas");
            this.canvas.width = this.videoElement.videoWidth;
            this.canvas.height = this.videoElement.videoHeight;
            document.getElementsByTagName("Body")[0].appendChild(this.canvas);
            this.context = this.canvas.getContext("2d");
        }
        this.context.drawImage(this.videoElement, 0, 0, this.videoElement.videoWidth, this.videoElement.videoHeight);
    };
    return VideoManager;
}());
var videoManager = new VideoManager();

谢谢！

使用画布时谷歌铬内存上升。也许是内存泄漏？

0 个答案: