javascript - 画像を円に変換する

Question

「四角い」画像を円形に変換しようとしています。
画像は 48x48 で、境界線は正方形です。

HTML/Javascript/CSSで切り抜いて円にしたいです。

Answer 1

その画像をdivとして配置し、divのbackground-imageをに設定border-radiusし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>