Округленное изображение обрезки углов с помощью JQuery

Question

Кто-нибудь знает библиотеку, чтобы обрезать изображение, чтобы получить округленный выходной сигнал? Я нашел это https://foliotek.github.io/Croppie/, но он только посещает изображение, чтобы убить. Я хочу, чтобы обрезать изображение этой формы: http://harboarts.com/shirtdesigner/jpg_design_exports/square_rounded_corners%20_vector-graphic_1331986667453.jpg

Answer 1

This example is near about what you are trying to achieve. 

cropper using jquery

$(document).ready(function(){ 
var c = $('.img-container img').cropper({ 
    aspectRatio:1/1, 
    strict:true, 
    background:false, 
    guides:false, 
    autoCropArea:0.6, 
    rotatable:false, 
    //using these just to stop box collapsing on itself 
    minCropBoxWidth:50, 
    minCropBoxHeight:50, 

    crop: function(data){ 
     //console.log("data = %o", data); 
     //console.log("this = %o", $(this)); 

     //test the new height/width 
     if(data.height < 100 || data.width < 100){ 
      //try to make it stop 
      //$(this).cropper('disable'); 
     }else{ 
      var json = [ 
       '{"x":' + data.x, 
       '"y":' + data.y, 
       '"height":' + data.height, 
       '"width":' + data.width + '}' 
      ].join(); 
      $('#image-data').val(json); 
     } 
    } 

}); // cropper 

//console.log("C = %o", c); 


$('.img-container img').on('dragmove.cropper', function (e) { 
    console.log('dragmove.cropper'); 

    var $cropper = $(e.target); 

    // Call getData() or getImageData() or getCanvasData() or 
    // whatever fits your needs 
    var data = $cropper.cropper('getCropBoxData'); 

    console.log("data = %o", data); 

    // Analyze the result 
    if (data.height <= 150 || data.width <= 150) { 
     console.log("Minimum size reached!"); 

     // Stop resize 
     return false; 
    } 

    // Continue resize 
    return true; 
}).on('dragstart.cropper', function (e) { 
    console.log('dragstart.cropper'); 

    var $cropper = $(e.target); 

    // Get the same data as above 
    var data = $cropper.cropper('getCropBoxData'); 

    // Modify the dimensions to quit from disabled mode 
    if (data.height <= 150 || data.width <= 150) { 
     data.width = 151; 
     data.height = 151; 

     $(e.target).cropper('setCropBoxData', data); 
    } 
}); 

}); // ready 

стиль:

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

}

HTML:

<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> 

Answer 2

Insider осложняющих код, который вы можете сделать это

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

});

<style> 

.important { граница радиуса: 100px;

}

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

Вставить перед

Примечание 1) Вы должны сохранить изображение как квадрат, то Oly вы можете получить круг еще и будет получить затмение вид фигуры.

Answer 3

вы можете достичь радиус границы как этот

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

или вы можете использовать эту библиотеку для радиуса границы pie border radius