优化透明视频方法

Question

video Hello，我一直在试图在我的网站上以透明的背景渲染此视频。经过一番研究，我设法偶然发现了这一雷斯，这让我使用画布获得了理想的效果。

通过视频右侧的B＆W掩码，我可以设置要透明的像素。问题是我当前的方法，有时是斯托特斯或帧率低。我将如何进行优化或完全采用其他方法？我觉得要绘制第二个画布，然后阅读像素似乎效率低下。 还要注意的是，无论出于何种原因，与原始图像相比，我的渲染图像似乎都被挤压了。

我当前的代码

const canvas = this.$refs.canvas.getContext("2d", { willReadFrequently: true })
const render = this.$refs.render.getContext("2d", { willReadFrequently: true })
const video = this.$refs.video

video.play()

function maskVideo() {
    canvas.drawImage(video, 0, 0, 3840, 1280)
    
    const frame = canvas.getImageData(0, 0, 1920, 1280)
    const frameData = frame.data

    for (var i = 0; i < frameData.length; i += 4) {
        const [r, g, b] = [frameData[i], frameData[i + 1], frameData[i + 2]]

        frameData[i + 3] = (r + g + b)
    }

    render.putImageData(frame, 0, 0)

    window.requestAnimationFrame(maskVideo)
}

window.requestAnimationFrame(maskVideo)

这里是一些优化和提高性能的替代方法：

1。

优化图像处理

Answer 1

，仅处理显着变化的过程。

使用

offscreencanvas

为网络工作者提供更好的性能。 2。 Reduce读/写操作

• getimagedata和putimagedata
成本很高。尝试使用webGl（three.js或pixi.js
• ）进行gpu加速处理。 3。 Canvas尺寸和缩放固定

您的drawImage函数使用（0,0，3840,1280）

确保两者都使用相同的维度。
• 4。 使用着色器方法 webgl带有碎片着色器的Webgl可以直接在GPU上有效地应用掩码，而不是手动处理像素。
请兄弟让我知道这是否有帮助。