Как убрать зеленый фон видео, сделав его прозрачным?

У меня есть видео с зеленым фоном. Я хочу удалить этот зеленый раздел (хроматический ключ), сделав его прозрачным, а затем отобразить видео поверх фон сайта.

Я могу найти только сложный код, который использует изображения.


javascript html video html5-canvas chromakey
person Programmer123    schedule 13.12.2015    source источник
comment
Возможно. Вы можете нарисовать видео на холсте и манипулировать пикселями, которые вы рисуете на нем. Вот учебник (рендеринг видео внутри холста, манипулирование изображениями с каждым пикселем) -> html5doctor.com/video -холст-магия   -  person Tomasz Kajtoch    schedule 13.12.2015

Ответы (1)


arrow_upward
2
arrow_downward

Исходная информация: video element может быть источником изображения для холста html5. Это означает, что кадр видео можно нарисовать на холсте (и управлять им).

Обзор. Метод context.getImageData получает пиксельные данные RGBA холста в виде массива. После изменения данных пикселей массива context.putImageData поместит измененные пиксели обратно на холст.

План Используйте CSS, чтобы расположить холст html5 поверх фона сайта. Используйте этот холст для рисования видеокадров поверх сайта (с зеленоватыми видеопикселями, сделанными прозрачными, чтобы сквозь них был виден фон сайта).

(с вашей стороны требуется некоторая сборка и обучение):

Разместите элемент холста html5, закрывающий фон веб-сайта.

Внутри временной петли (requestAnimationFrame):

  1. Очистить холст: context.clearRect,
  2. Нарисуйте на холсте видеокадр: context.drawImage(video,0,0),
  3. Получить данные о пикселях с холста: context.getImageData,
  4. Проверяйте каждый пиксель на «зеленоватый» цвет: if(green>220 && red<20 && blue<20),
  5. Если пиксель зеленоватый, сделайте его прозрачным: (alpha=0),
  6. Поместите измененные пиксели обратно на холст: context.putImageData,
  7. Повторяйте в #1, пока видео не закончится.

Ссылки, которые помогут вам в обучении

Предыдущее сообщение Stackoverflow относительно № 2: Поместите тег видео на тег холста

Предыдущий пост Stackoverflow относительно № 3-6: Циклический просмотр пикселей в изображении< /а>

person markE    schedule 13.12.2015
comment
@markeE, но как определить цветовой диапазон, например. для фона с синим цветом я пытался найти его в Google, но безуспешно :) - person Motoo; 02.11.2016
comment
@Motoo Просто отрегулируйте шаг № 4, чтобы проверить свою форму голубизны. Хотя я понятия не имею, каков ваш вариант использования, вы можете начать с rec<20 && green<20 && blue>220. :-) - person markE; 02.11.2016
comment
Лично у меня следующий метод с большими/меньшими значениями вообще не работал и очень опасен в использовании. Поскольку относительно хорошее значение зеленого может иметь место даже при очень низких значениях, но также могут возникать и другие типы оттенков. Этот метод green > red + reverse_tolerance && green > blue + tolerance у меня работал лучше, но все равно очень плохо. А нет ли более точного? Я думаю, что формат HSL может помочь больше. - person Eksapsy; 06.03.2018
comment
. . . опасный? - person ashleedawg; 21.11.2020