是否有必要使用2個畫布進行html5視頻操作？

Question

我嘗試在javascript中進行一些視頻操作。 我讀了一些有關它的文章，看起來每個人都使用2個畫布來完成任務。 首先，他們將視頻繪制在第一個畫布上，從中讀取圖像數據，進行一些像素操作，然后將其繪制在第二個畫布上。 我想知道我真的必須使用2個畫布來執行此操作嗎？ 是否沒有任何方法可以直接從視頻中獲取圖像數據？ 還是我們有一些性能問題，這是解決方案？

Answer 1

因為您無法從視頻中獲取像素數據。

Canvas API具有getImageData()方法，該方法會返回一個浮點數組，其中包含每個像素的每種顏色（和alpha值）的值。 不幸的是，video元素不能做到這一點:(

您可以使用一個畫布來繪制視頻幀並對其進行操作。 我猜人們更喜歡在兩個畫布上執行此操作，以便他們可以保留原始像素數據，以防萬一在加載新幀或進行其他操作之前進行更改操作...