@MishaPavlov

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

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

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

Заранее благодарен.
  • Вопрос задан
  • 326 просмотров
Решения вопроса 1
twobomb
@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.

Вот пример деформации c85423506db84cb2968f8ec0c99066b9.PNG
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
trushka
@trushka
Разве что webGL использовать. Есть библиотека для работы с этим делом three.js, там можно прямо 3D-модель стакана загрузить и лепить на него всё, что угодно)) А готовый результат можно даже повертеть))
Вот, когда-то с чайничком так ирался))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 11:37
2500 руб./за проект
19 июн. 2024, в 11:20
4800 руб./за проект
19 июн. 2024, в 11:09
3000 руб./за проект