Здравствуйте. Как при помощи HTML5, canvas и JavaScript загрузить картинку и сделать ее круглой (без искажения изображения, просто обрезать края и закруглить)?
PS:
Без использования каких-либо библиотек.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВ HTML5 при помощи canvas, закруглить картинку оказалось немного сложнее, чем я предполагал. Шарясь по гуглу, у меня возникло ощущение, что при помощи canvas, все обычно только чертят всякие там градиенты, линии, кружочки и т.д. Потому что другого очень мало. И то, как сделать круглой картинку, я догадался только прочитав пару глав из книги Дронов.В - HTML 5 CSS 3 и Web 2.0.....
. Ну так вот, приведу пример, где генерируется data url
итоговой картинки, которую впредь можно ставить куда угодно.
<body>
<img onclick="build(this)" id="face1" src="resources/imgs/ico-twitter.png"/>
<div id="map_canvas" style="width:640px;height:480px;">
</div>
<script type="text/javascript">
function build(caller){
var image = getMergedUrl(document.getElementById("face1"));
var img = document.createElement('img');
img.src = image;
document.getElementById("map_canvas").appendChild(img);
}
function getMergedUrl(img){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
//Рисуем окружность. Радиус возьмем по высоте
ctx.beginPath();
//x, y, radius, startAngle, endAngle, anticlockwise
ctx.arc(img.width/2, img.height/2, img.height/2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();//рисуем закрашенную фигуру.
/*теперь задаем наложение для картинки. При таком наложении,отображается только та часть новой фигуры, которая накладыва-
ется на старую. Остальные части новой и старой фигур не выводятся;*/
ctx.globalCompositeOperation = 'source-in';
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png");
}
</script>
</body>
Вот что в итоге получится после одного нажатия на нашу картинку:
И еще. Из-за какой-то там политики безопасности, метод "toDataURL()
", будет работать только в текущем домене. Ну и у меня почему-то не работает на локальном компьютере.
file://
. Потому что http(s) будет работать одинаково для локального и внешнего.