Как я могу создать видео с использованием холста HTML5, где я могу прикрепить лицо человека к движущемуся элементу видео с помощью хроматического ключа. Чтобы лицо двигалось вместе с этим элементом.
Наткнулся на этот веб-сайт JibJab, который использует это.
Просто хочу знать, как это можно сделать с помощью холста HTML5.
Согласно моим исследованиям, мы можем разместить видео на видео или даже на статичном изображении (http://www.xindustry.com/html5greenscreen/). Но как переместить статическое изображение - это то, что я ищу.
Также нашел это решение, но оно создаст прозрачный элемент в видео и не прикрепит к нему изображение.
currentTime
вашего видео, например, в формате json ("myPos":{"12":{"x":40,"y":30}, 13:{"x": 43, "y":32}...}
, затем просто получить из него позицию:var pos = myPos[~~vid.currentTime]; drawImage(yourFace, pos.x, pos.y)
поверх видеокадра (нарисовано благодаряdrawImage(yourVid, 0,0)
). Для неизвестных видео вы можете В вашем видео должен быть какой-то маркер, который вы должны будете прочитать изdata
getImageData()
. - person Kaiido   schedule 06.01.2017var px = i / 4; var y = Math.floor(px / canvas.width); var x = Math.round(((px/canvas.width) - y ) * canvas.width);
А вот запускатьgetImageData
по видео действительно не то, что я бы посоветовал никому, тем более на неизвестных конфигах клиента. Лучше сделать это один раз и сохранить позиции в json. - person Kaiido   schedule 06.01.2017