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

Question

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

Answer 1

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

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

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

Answer 2

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

кроппер с помощью 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 3

Инсайдер усложняет код, вы можете сделать это

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

});

<style>

.important {border-radius: 100px;

}

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

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

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