Rumah > Artikel > hujung hadapan web > Laksanakan algoritma skrin hijau menggunakan JavaScript
Laksanakan algoritma skrin hijau menggunakan JavaScript
- WBOYke hadapan
- 2023-09-23 11:57:05933semak imbas
Imej latar belakang hijau telah ditukar dan digantikan dengan sebarang kesan atau imej lain menggunakan warna hijau Algoritma skrin, juga dikenali sebagai algoritma kunci kroma. Pendek kata, apa yang kita lakukan adalah Tukar semua piksel hijau dalam imej ke hadapan dengan pasangan yang sepadan dalam imej ke belakang Imej latar belakang.
Selain itu, kita perlu ingat bahawa saiz imej output harus sepadan dengan saiz imej output imej hadapan. Dalam langkah seterusnya, salin piksel daripada imej hadapan ke dalam imej baharu imej. Gunakan piksel yang sepadan daripada imej latar belakang dan bukannya menyalin piksel hijau.
Jangan terlepas untuk memasukkan fail sumber berikut ke dalam kod HTML anda sebelum menggunakan perkara berikut Kod -
<script src=”https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js”></script>
Kod JavaScript yang diperlukan untuk melaksanakan algoritma ini disediakan di bawah. Untuk menggunakannya anda mesti mencipta Tulis kod HTML anda sendiri.
Kod sumber HTML
Anda mesti menambah kod HTML ini pada elemen dokumen HTML anda.
<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()">
Kod sumber CSS
Seterusnya, kod CSS dalam dokumen HTML
<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>
Kod sumber JavaScript
Anda mesti menambah kod JavaScript berikut dalam teg <script> dokumen HTML anda</script>
<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>
Contoh
Sekarang mari kita semak kod dan output lengkap dalam kod berikut.
<!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>
Anda akan melihat skrin output ini tanpa menambah sebarang imej.
Seterusnya, selepas menambah imej "Imej Pertama" dan "Imej Latar Belakang", anda akan melihat skrin output ini.
Kini anda akan melihat output akhir selepas mengklik butang "Gabung Imej". Kedua-dua gambar adalah Gabungan ditunjukkan di bawah.
Dua imej berfungsi sebagai input kepada algoritma. Yang pertama ialah imej pertama dengan latar belakang hijau, yang kedua ialah imej latar belakang yang sepatutnya digunakan dan bukannya hijau latar belakang.
JavaScript menggabungkan dua imej selepas menerimanya sebagai input, oleh itu, ketinggalan Imej menggantikan latar belakang hijau imej hadapan. Untuk melaksanakan hijau Algoritma penapisan, kod disediakan di atas.
Atas ialah kandungan terperinci Laksanakan algoritma skrin hijau menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!