Javascript 使用Jquery的圆角裁剪图像

是否有人知道有一个库可以裁剪图像以获得圆角输出？我找到了这个，但它只会给cicrle留下图像。 我要将图像裁剪为此形状：

}

HTML:

---

使代码复杂化的内幕人士您可以这样做

$(document).ready(function(){
$("#btn1").click(function(){
    $("img").addClass("important");
});

}))

.重要{ 边界半径：100px

}

插入之前

注意

---

1） 你必须保持图像为正方形，这样你就可以得到圆形，否则你将得到日食形状。

你可以像这样获得边界半径

$(document).ready(function(e) {
    $('button').click(function(e) {
        $('img').css({
            "border-radius": "10px",
            "-moz-border-radius": "10px",
            "-webkit-border-radius": "10px"
        });
    });
});

或 可以将此库用于边界半径

嗨！请避免发布“仅链接”-答案。如果你的链接死了，这个答案对未来的用户没有帮助。而是将代码添加到您的答案中。如果你这样做了，有一个链接到一个“可视化工作”的例子就可以了！

.img-container img {
width: 800px;
height: auto;

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/0.9.1/cropper.min.css">
<div class="col-md-9">
<div class="img-container"><img alt="Picture" src="http://fengyuanchen.github.io/cropper/img/picture.jpg"></div>
</div>

$(document).ready(function(){
$("#btn1").click(function(){
    $("img").addClass("important");
});

<style>

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="100"><br><br>

$(document).ready(function(e) {
    $('button').click(function(e) {
        $('img').css({
            "border-radius": "10px",
            "-moz-border-radius": "10px",
            "-webkit-border-radius": "10px"
        });
    });
});