Laksanakan algoritma skrin hijau menggunakan JavaScript-tutorial js-php.cn

使用 JavaScript 实现绿屏算法

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>

Salin selepas log masuk

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()">

Salin selepas log masuk

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>

Salin selepas log masuk