[TypeScript] Алгоритм реалистичного наложения на зеленый квадрат
Входные данные:
- изображение с одеждой, на одежде зеленый квадрат (деформация, тени)
- квадратное изображение
- все необходимые маски и иные мета файлы (например, тени в виде изображения, маска деформации сделанная вручную в фотошопе итд)
Выходные данные:
- результирующее изображение с наложенным квадратным изображением на зеленый квадрат на одежде, применена деформация к изображению и наложены тени/свет поверх картинкой.
Тени и свет будет делать дизайнер, с вас основное это продумать алгоритм деформации под зеленый квадрат: масштабирование под зеденый квадрат и придумать как поступить с деформацией
Критерии приемки:
1. зеленая область полностью покрыта принтом, т.е. применена деформация, схожая деформацией зеленого квадрата (нужно заранее готовить маску деформации через фотошоп или что-то другое)
2. тени, свет наложены естественно на принт, т.е. схожи с тенями зеленого квадрата (нужно заранее готовить это и можно накладывать изображение теней и света поверх маски деформации картинкой)
3. реализация написана на typescript и работает в браузере
4. квадрат на который происходит наложение всегда зеленый, цвет одежды не должен играть роли
6. минимальная ширина и высота зеленого принта (по меньшей стороне в случае деформации) на фоновом изображении 100px
7. минимальная ширина и высота накладываемого квадрата 500px
На скринах показана одежда с зелеными квадратами для встраивания принта, и сам принт, причем сам принт может иметь любое другое изображение
Возможно вы предложите вариант который будет работать только серверно и на node.js, тоже ок