資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 JavaScript 實現綠幕演算法
綠幕影像會被更改並替換為任何特效或其他影像，方法是使用綠幕演算法（也稱為色鍵演算法）。簡而言之，我們所做的是將前景影像中的所有綠色畫素替換為背景影像中與其對應的畫素。
此外，我們需要注意輸出影像的大小應與前景影像的大小相匹配。在接下來的步驟中，前景影像中的畫素將被複制到新影像中。不用複製綠色畫素，而是使用背景影像中對應的畫素。
在應用以下程式碼之前，請務必將以下原始檔包含到您的 HTML 程式碼中：
<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>
實現此演算法所需的 JavaScript 程式碼如下所示。要使用它，您必須自己建立 HTML 程式碼。
HTML 原始碼
您必須在 HTML 文件的 元素中新增此 HTML 程式碼。
<h1>Green Screen Algorithm Implementation using JavaScript with TutorialsPoint </h1> <canvas id="image1"></canvas> <canvas id="image2"></canvas> <br /> <p> First Image: <input type="file" id="myImageFile" multiple="false" onChange="frontimg()"> </p> <p> Background Image: <input type="file" id="bgImageFile" multiple="false" onChange="backimg()"> </p> <input type="button" value="Merge Image" onClick="merge()">
CSS 原始碼
接下來，在 HTML 文件中新增 CSS 程式碼
<style>
canvas {
background: rgb(214, 235, 176);
border: 1px solid rgb(13, 109, 160);
width: 420px;
height: 290px;
margin: 30px;
}
h1{
color: rgb(13, 109, 160);
}
body {
background-color: #bbb6ab;
}
</style>
JavaScript 原始碼
您必須在 HTML 文件的 <script> 標籤中新增以下 JavaScript 程式碼
<script type="text/javascript">
let forwdImage = null;
let secImage = null;
// This function accepts an input of a forward picture
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// Background picture is output from this function
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// This function combines the two images and outputs the
// merged image as the final result. The Green Screen
// Algorithm is implemented
function merge() {
clear();
let image1 = document.getElementById("image1");
let outputImage = new SimpleImage(
forwdImage.width, forwdImage.height);
for (let pixel of forwdImage.values()) {
if (pixel.getGreen() > pixel.getRed() +
pixel.getBlue()) {
let x = pixel.getX();
let y = pixel.getY();
let newPixel = secImage.getPixel(x, y);
outputImage.setPixel(x, y, newPixel);
} else {
outputImage.setPixel(pixel.getX(),
pixel.getY(), pixel);
}
}
outputImage.drawTo(image1);
}
// The output and input from earlier
// fetches are cleared by this function.
function clear() {
let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");
let context = image1.getContext("2d");
context.clearRect(0, 0, image1.width, image1.height);
context = image2.getContext("2d");
context.clearRect(0, 0, image2.width, image2.height);
}
</script>
示例
現在讓我們檢查一下完整的程式碼和以下程式碼中的輸出。
<!DOCTYPE html>
<html>
<title>Implement Green Screen Algorithm using JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script>
<style>
canvas {
background: rgb(214, 235, 176);
border: 1px solid rgb(13, 109, 160);
width: 420px;
height: 290px;
margin: 30px;
}
h1 {
color: rgb(13, 109, 160);
}
body {
background-color: #bbb6ab;
}
</style>
</head>
<body>
<h1>Green Screen Algorithm Implementation using JavaScript with TutorialsPoint </h1>
<canvas id="image1"></canvas>
<canvas id="image2"></canvas>
<br />
<p>
First Image: <input type="file" id="myImageFile" multiple="false" onChange="frontimg()">
</p>
<p>
Background Image: <input type="file" id="bgImageFile" multiple="false" onChange="backimg()">
</p>
<input type="button" value="Merge Image" onClick="merge()">
<script type="text/javascript">
let forwdImage = null;
let secImage = null;
// This function accepts an input of a forward picture
function frontimg() {
let fileInput = document.getElementById("myImageFile");
let canvas = document.getElementById("image1");
forwdImage = new SimpleImage(fileInput);
forwdImage.drawTo(canvas);
}
// Background picture is output from this function
function backimg() {
let fileInput = document.getElementById("bgImageFile");
let canvas = document.getElementById("image2");
secImage = new SimpleImage(fileInput);
secImage.drawTo(canvas);
}
// This function combines the two images and outputs the
// merged image as the final result. The Green Screen
// Algorithm is implemented
function merge() {
clear();
let image1 = document.getElementById("image1");
let outputImage = new SimpleImage(
forwdImage.width, forwdImage.height);
for (let pixel of forwdImage.values()) {
if (pixel.getGreen() > pixel.getRed() +
pixel.getBlue()) {
let x = pixel.getX();
let y = pixel.getY();
let newPixel = secImage.getPixel(x, y);
outputImage.setPixel(x, y, newPixel);
} else {
outputImage.setPixel(pixel.getX(),
pixel.getY(), pixel);
}
}
outputImage.drawTo(image1);
}
// The output and input from earlier
// fetches are cleared by this function.
function clear() {
let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");
let context = image1.getContext("2d");
context.clearRect(0, 0, image1.width, image1.height);
context = image2.getContext("2d");
context.clearRect(0, 0, image2.width, image2.height);
}
</script>
</body>
</html>
您將看到此輸出螢幕，無需新增任何影像。
接下來，新增“第一張影像”和“背景影像”後，您將看到此輸出螢幕。
現在，單擊“合併影像”按鈕後，您將看到最終輸出。兩個影像組合在一起，如下所示。
此演算法的輸入是兩張圖片。第一張是帶有綠色背景的前景影像，第二張是應用來替換綠色背景的背景影像。
JavaScript 在接收兩張輸入影像後將它們組合起來；因此，背景影像取代了前景影像的綠色背景。為了實現綠幕演算法，以上提供了程式碼。
更新於：2022年12月12日
瀏覽量：797
廣告