如何删除视频的绿色背景，并使用html5和javascript将该视频粘贴到html5网站的背景上？ [英] How to remove green background of a video and paste that video on the background of html5 website using only html5 and javascript?
问题描述
所以我正在建立一个网站，我有一个绿色背景的惊人的星球大战视频。我想删除绿色背景（色度键）并将视频粘贴到html5网站背景上。
So I'm making a website and I have a amazing star wars video with a green background. And I want to remove the green background (chroma key) and paste the video over the html5 website background.
我搜索了几个小时（不是jokking）我可以只找到使用图像的复杂代码...
I've searched for hours (not jokking) and I can only find complex code that uses images...
所以我想用什么都不用绿色视频背景替换它，然后将它粘贴到网站的背景上。
So I would like to replace the green video background with nothing and then paste it over the background of the website.
有人能帮帮我吗？我知道这是一个古老的缺点，但我只是开始编码和帮助将不胜感激。
Can someone help me? I know this is an old toppic, but I'm just starting to code and help would be appreciated.
推荐答案
开始信息： 视频元素可以是html5画布的图像源。这意味着可以在画布上绘制（并操纵）一帧视频。
Starting information: The video element can be an image source for html5 canvas. That means a frame of video can be drawn onto (and manipulated by) the canvas.
概述： 上下文.getImageData 方法将获取画布中的RGBA像素数据。修改数组的像素数据后， context.putImageData 会将修改后的像素放回到画布上。
Overview: The context.getImageData method will get the canvas' RGBA pixel data in an array. After modifying the array's pixel data, context.putImageData will put the modified pixels back onto the canvas.
计划使用CSS在网站背景上放置html5画布。使用该画布在网站上绘制视频帧（绿色视频像素变为透明，以便网站背景显示）。
A Plan Use CSS to position an html5 canvas over the site background. Use that canvas to draw video frames over the site (with greenish video pixels made transparent so the site background shows through).
（需要一些装配和学习你的部分）：
定位一个覆盖网站背景的html5画布元素。
Position an html5 canvas element covering the website background.
里面时间循环（ requestAnimationFrame ）：
- 清除画布：
context.clearRect， - 在画布上绘制视频帧：
context.drawImage（video，0,0）， - 从画布获取像素数据：
context.getImageData， - 检查每个像素是否为green-ish-ness：
if（绿色> 220&& red< 20&& blue< 20）， - 如果像素为绿色，请将其设为透明：
（alpha = 0）， - 将修改后的像素放回画布上：
context.putImageData， - 在＃1处重复，直到视频完成。
- Clear the canvas:
context.clearRect, - Draw a video frame onto the canvas:
context.drawImage(video,0,0), - Get the pixel data from the canvas:
context.getImageData, - Check each pixel for "green-ish-ness":
if(green>220 && red<20 && blue<20), - If a pixel is greenish, make it transparent:
(alpha=0), - Put the modified pixels back onto the canvas:
context.putImageData, - Repeat at #1 until the video finishes.
参考帮助您学习
关于＃2的Stackoverflow之前的帖子： Put Canvas标签上的视频标签
Stackoverflow prior post regarding #2: Put the video tag on the Canvas tag
关于＃3-6的Stackoverflow之前的帖子：循环显示图像中的像素
Stackoverflow prior post regarding #3-6: Looping through pixels in an image
这篇关于如何删除视频的绿色背景，并使用html5和javascript将该视频粘贴到html5网站的背景上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
