此外，我们需要记住，输出图像的大小应与输出图像的大小相匹配向前图像。在接下来的步骤中，将前向图像中的像素复制到新图像中图像。使用背景图像的匹配像素，而不是复制绿色像素。
在应用以下内容之前，请不要错过将以下源文件包含到您的 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 文档的 标记中添加以下 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 在接收到两个图像作为输入后将这两个图像组合起来；因此，落后的图像取代前向图像的绿色背景。为了贯彻落实绿色筛选算法，上面提供了代码。
以上就是使用 javascript 实现绿屏算法的详细内容。