javascript - Transform an image into a circle - Stack Overflow

admin管理员组

文章数量:1279083

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.

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.

• javascript
• html
• image

Share Improve this question Follow asked Jul 10, 2013 at 19:46 Lucas T.Lucas T. 13322 gold badges33 silver badges1010 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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*/
}

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>

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.

本文标签： javascriptTransform an image into a circleStack Overflow