javascript - 将图像转换为圆形

Question

我正在尝试将“方形”图像转换为圆形图像。
图像是 48x48，它的边界是方形的。

我想用 HTML/Javascript/CSS 裁剪它，把它变成一个圆圈。

Answer 1

将该图像作为 div，background-image然后将border-radiusdiv 设置为50%. 就是这么简单。:)

小提琴。

div的CSS：

div {
    width: 48px;
    height: 48px;
    background: url(your_image_url.your_image_extension);
    border-radius: 50%; /*the magic*/
}

Answer 2

如果您只想使用javascript，这将起作用：

<img src='.../images/myImage.png' id="id">
<script>
document.getElementById('id').style.borderRadius = '50%';
</script>

Answer 3

另一种方法是将图像放入编辑器中，然后剪切正方形的角。因此，您不想要的部分需要是透明的。当你将它放在网页中时，透明部分将从后面继承颜色。