如何删除视频的绿色背景，使其透明? [英] How to remove green background of a video, making it transparent?
问题描述
我有一个绿色背景的视频.我要删除此绿色部分(色度键)，使其透明，然后在上方显示视频网站背景.
I have a video with a green background. I want to remove this green section (Chroma key), making it transparent, and then display the video over the website background.
我只能找到使用图像的复杂代码.
I can only find complex code that uses images.
推荐答案
起始信息: video element可以是html5 canvas的图像源.这意味着可以将视频帧绘制到画布上(并由其操纵).
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.
概述:context.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 canvas元素.
Position an html5 canvas element covering the website background.
在时间循环(requestAnimationFrame)中:
- 清除画布:
context.clearRect， - 在画布上绘制视频帧:
context.drawImage(video,0,0)， - 从画布获取像素数据:
context.getImageData， - 检查每个像素的绿色感":
if(green>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先前帖子:放入画布标签上的视频标签
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
这篇关于如何删除视频的绿色背景，使其透明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
