Здравствуйте. Как при помощи HTML5, canvas и JavaScript загрузить картинку и сделать ее круглой (без искажения изображения, просто обрезать края и закруглить)? PS Без использования каких-либо библиотек.
Ответ
В HTML5 при помощи canvas, закруглить картинку оказалось немного сложнее, чем я предполагал. Шарясь по гуглу, у меня возникло ощущение, что при помощи canvas, все обычно только чертят всякие там градиенты, линии, кружочки и т.д. Потому что другого очень мало. И то, как сделать круглой картинку, я догадался только прочитав пару глав из книги Дронов.В - HTML 5 CSS 3 и Web 2.0...... Ну так вот, приведу пример, где генерируется data url итоговой картинки, которую впредь можно ставить куда угодно.
Вот что в итоге получится после одного нажатия на нашу картинку:
И еще. Из-за какой-то там политики безопасности, метод "toDataURL()", будет работать только в текущем домене. Ну и у меня почему-то не работает на локальном компьютере.
Комментариев нет:
Отправить комментарий