javascript - 从HTMLVideoElement提取帧

所以这是我的JavaScript代码：

// Convert Frame to Image
Object.defineProperty(HTMLVideoElement.prototype, 'convertFrameToImage', {
    value: function convertFrameToImage() {
        // Create the Image.
        let image = new Image();

        // Create a Canvas to draw the chosen frame.
        let canvas= document.createElement('canvas'),
            canvasContext = metadata.getContext('2d');

        // Draw the frame.
        canvasContext.drawImage(this, 0, 0, this.offset.height, this.offset.width);

        // Modify the Source of the Image to the Canvas's Data URL.
        image.src = canvas.toDataURL();

        // Return the Image.
        return image
    }
})

我希望通过将元素的Image设置为所选帧的屏幕，可以从HTMLVideoElement的指定帧中创建src。

我知道上面的代码看起来不完整，但是我不确定从这里去哪里。

任何帮助将不胜感激。

最佳答案

您可以简单地定义扩展HTMFooBarElement的HTMLElement类：

class HTMLFooBarElement extends HTMLElement {
    connectedCallback () {
        this.innerHTML = "Foo-Bar"
    }
}

然后扩展HTMLFooBarELement类：

class FoobBar extends HTMLFooBarElement

customElements.define( "foo-bar", FooBar )

class HTMLFooBarElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "FooBar Element"
  }
};

class FooBar extends HTMLFooBarElement {};

customElements.define("foo-bar", FooBar);

<foo-bar></foo-bar>

关于javascript - 从HTMLVideoElement提取帧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46471480/