HTML5:使用Canvas即時處理Video
文檔內容
本文所使用的XHTML文檔如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
p {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
<script type="text/javascript;version=1.8" src="main.js"></script>
</head>
<body onload="processor.doLoad()">
<p>
<video id="video" src="video.ogv" controls="true"/>
</p>
<p>
<canvas id="c1" width="160" height="96"/>
<canvas id="c2" width="160" height="96"/>
</p>
</body>
</html>以上代碼關鍵部分如下:
1.創建了兩個canvas元素，ID分別為c1和c2。 c1用於顯示當前幀的原始視頻，c2是用來顯示執行chroma-keying特效後的視頻；c2預加載了一張靜態圖片，將用來取代視頻中的背景色部分。
2.JavaScript程式碼從main.js檔案匯入；這段腳本使用JavaScript 1.8的特性，所以在匯入腳本時，第22行中指定了版本。
3.當網頁載入時，main.js中的processor.doLoad()方法會運行。
JavaScript程式碼
main.js中的JS程式碼包含三種方法。
初始化chroma-key
doLoad()方法在XHTML文件初始載入時呼叫。這個方法的作用是為chroma-key處理程式碼準備所需的變量，設定一個事件偵聽器，當使用者開始播放影片時我們能偵測到。
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},這段程式碼取得XHTML文件中video元素和兩個canvas元素的引用，也取得了兩個canvas的圖形上下文的引用。這些將在我們實現chroma-keying特效時使用。
addEventListener()監聽video元素，當使用者按下影片上的播放按鈕時被呼叫。為了應對用戶回放，這段程式碼獲取影片的寬度和高度，並且減半（我們將在執行chroma-keying效果時將影片的大小減半），然後調用timerCallback()方法來啟動影片捕捉和視覺效果計算。
定時器回調
定時器回調函數在視頻開始播放時被調用（當“播放”事件發生時），然後負責自身週期調用，為每一幀視頻實現keying特效。
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},回呼函數首先檢查影片是否正在播放；如果沒有，回呼函數不做任何事並立即返回。
然後呼叫computeFrame()方法，該方法對目前視訊幀執行chroma-keying特效。
回呼函數做的最後一件事就是呼叫setTimeout()，來讓它自己盡快重新呼叫。在真實環境中，你可能會基於影片的幀率來設定呼叫頻率。
處理視訊幀資料
computeFrame()方法，如下所示，實際上負責抓取每個畫面的資料和執行chroma-keying特效。
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}當它被調用後，video元素將顯示最近的視頻幀數據，如下所示:
在第2行，視頻幀被複製到第一個canvas ctx1的圖形上下文中，高度和寬度值指定為我們之前保存的幀大小的一半。請注意，您可以透過傳遞video元素到繪圖上下文的drawImage()方法來繪製目前視訊幀。結果是：
第3行程式碼透過呼叫第一個canvas上下文的getImageData()方法，來取得原始影像資料目前視訊幀的副本。它提供了原始的32位元像素影像數據，這樣我們就能夠進行操作。第4行程式碼透過將幀影像資料的總長度除以4，來計算影像的總像素數。
第6行程式碼循環掃描所有像素，取得每個像素的紅、綠、藍值，同時和預先定義的背景色進行比較，這些背景色將以foo.png中匯入的背景影像取代。
被偵測成背景的每個像素，將它的alpha值替換為零，表示該像素是完全透明的。結果，最終的圖像背景部分是100%透明的，這樣在第13行程式碼，把它被繪製到目標的上下文中時，效果是內容疊加到靜態背景上。
由此產生的影像看起來像這樣：
在影片播放時反覆這樣做，這樣一幀接一幀處理，呈現出chroma-key的特效。
更多HTML5:使用Canvas即時處理Video相關文章請追蹤PHP中文網！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
什麼是HTML5數據屬性？
Aug 06, 2025 pm 05:39 PM
HTML5dataattributesarecustom,validHTMLattributesusedtostoreextrainformationinelementsforJavaScriptorCSS.1.Theyaredefinedasdata-*attributes,likedata-user-id="123".2.Theyallowembeddingprivate,customdatadirectlyinmarkupwithoutaffectinglayoutor
如何將帆布API用於HTML5中的基本圖？
Aug 07, 2025 am 07:15 AM
要使用HTML5CanvasAPI進行基本繪圖，首先在HTML中創建canvas元素並設置寬高屬性，然後通過JavaScript獲取其2D渲染上下文；1.使用fillRect、strokeRect和clearRect繪製和清除矩形；2.通過beginPath、moveTo、lineTo和closePath創建路徑並繪製線條或自定義形狀；3.利用arc方法繪製圓形或弧線；4.使用fillText和strokeText添加填充或描邊文本；5.通過設置fillStyle、strokeStyle、lin
HTML5中的可讀性屬性是什麼？
Aug 08, 2025 am 11:55 AM
ThereadonlyattributeinHTML5makesforminputsnon-editablewhilestillallowingsubmissionanduserinteraction;1.Itappliestoandelements;2.Itisabooleanattribute,soonly"readonly"needstobepresent;3.Unlike"disabled",itallowsfocusandthedataisinc
HTML ID和類有什麼區別
Aug 07, 2025 am 12:03 AM
id必須唯一，每個頁面中一個id只能用於一個元素，而class可重複使用於多個元素，且一個元素可擁有多個class；2.使用id的場景包括：定位單個特定元素、頁面內鏈接錨點、JavaScript通過id操作元素、label與表單元素關聯；使用class的場景包括：對多個元素應用相同樣式或行為、構建可複用UI組件、JavaScript選擇多個元素；3.CSS中通過#id選擇器和.class選擇器分別targeting，JavaScript中getElementById()用於id，getEleme
如何在html中的網站標題選項卡中添加圖標
Aug 07, 2025 pm 11:30 PM
要為網站標題欄添加圖標，需在HTML的部分鏈接一個favicon文件，具體步驟如下：1.準備一個16x16或32x32像素的圖標文件，推薦使用favicon.ico命名並放置於網站根目錄，或使用PNG、SVG等現代格式；2.在HTML的中添加鏈接標籤，如，若使用PNG或SVG格式則相應調整type屬性；3.可選地為移動設備添加高分辨率圖標，如AppleTouchIcon，並通過sizes屬性指定不同尺寸；4.遵循最佳實踐，將圖標置於根目錄以確保自動檢測，更新後清除瀏覽器緩存，檢查文件路徑正確性，
如何以HTML5形式創建彩色選擇器？
Aug 08, 2025 am 03:48 AM
使用type="color"可創建HTML5顏色選擇器，1.使用添加顏色輸入；2.可通過value屬性設置默認顏色值（必須為7字符十六進制格式如#ffffff）；3.現代瀏覽器均支持，舊版瀏覽器會回退為文本輸入；4.可結合JavaScript實時預覽顏色變化；5.應添加label標籤以提升可訪問性，必要時可用JavaScript庫提供降級支持，該方法簡單有效且廣泛支持。
如何在HTML5中實現基本聯繫表？
Aug 08, 2025 am 04:57 AM
使用元素並設置action、method等屬性指定數據提交地址和方式；2.添加HTML5輸入類型如type="email"和required屬性以實現語義化和基礎驗證；3.通過label的for屬性與輸入框id關聯，提升可訪問性，並用p或div包裹每組標籤和輸入框以優化結構；4.表單提交需後端處理，測試時可使用Formspree等第三方服務替代；5.可選地通過JavaScript增強客戶端驗證，但原生HTML5驗證已能滿足基本需求，最終需在服務器端驗證和清理數據以確保安全，該
您如何在HTML5中創建響應式視頻？
Aug 06, 2025 pm 05:28 PM
要創建響應式HTML5視頻，需先用CSS控制寬高比，再通過容器和絕對定位實現自適應；1.使用標籤並添加controls、preload="metadata"等屬性；2.將視頻包裹在class為video-container的div中；3.用CSS設置容器的padding-bottom為56.25%以維持16:9寬高比；4.對視頻設置position:absolute、top:0、left:0、width:100%、height:100%和object-fit:cover；5.
