Как сделать трансформацию картинки в виде дуги на js?

Question

[MishaPavlov]

Доброго времени суток.

Возникла такая проблема - надо сделать трансформацию картинки в виде дуги на js, должно выйти что то такое:

Может есть какие-то библиотеки, готовые решения или в какую сторону рыть?

Заранее благодарен.

Answer 1

[twobomb]

Вообщем вот написал на основе квадратичной кривой безье.
Но в идеале нужно еще написать сглаживание. Атрибут canvas data-offset задает насколько сильное скругление , data-url ссылка на изображение .
Ну и самая главная проблема, чтобы работал с изображениями
раскоментируй строку //ctx.drawImage(img,0,0,ctxW,ctxH - offset); и закоментируй
ctx.fillRect(0,0,ctxW,ctxH - offset);
Ссылка которая будет в data-url должна быть на том же хосте что и скрипт! Тоесть если ссылка на сайт localhost/page.php то и ссылка на изображение localhost/.../name.jpg
Или ссылка должна быть на сервере с параметром Access-Control-Allow-Origin "*" иначе сработает защита и выкинет исключение

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Вот пример деформации

Comments

[MishaPavlov]

Большое спасибо! То что надо было.

Answer 2

[trushka]

Разве что webGL использовать. Есть библиотека для работы с этим делом three.js, там можно прямо 3D-модель стакана загрузить и лепить на него всё, что угодно)) А готовый результат можно даже повертеть))
Вот, когда-то с чайничком так ирался))

Comments

[MishaPavlov]

Очень интересная библиотека, но мне надо просто наложение картинки с таким эффектом на другую картинку (стаканчик), это будет не 3D.
Спасибо за ответ.