将图像转换成圆形

Question

I'm trying to convert a "squared" image to a circle one.
The image is 48x48,its borders are squared.

I want to crop it with HTML/Javascript/CSS,to turn it into a circle.

Answer 1

Put that image as a div's background-image then set the border-radius of the div to 50% . Simple is that. :)

Fiddle.

CSS of the div:

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

Answer 2

If you want to use just javascript this would work:

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

Answer 3

Another way is to put the image into an editor and then cut the corners of the squares. Therefore, the part you don't want needs to be transparent. When you will put it in a webpage, the transparent part will inherit the color from behind.