使用 Jquery 的圆角裁剪图像 [关闭]答案

【问题标题】：Rounded Corner Crop Image Using Jquery [closed]使用 Jquery 的圆角裁剪图像 [关闭]
【发布时间】：2016-12-31 05:04:24
【问题描述】：

有没有人知道一个库来裁剪图像以实现圆角输出？我找到了这个https://foliotek.github.io/Croppie/，但它只会将图像裁剪为 cicrle。我想把图片裁剪成这个形状：http://harboarts.com/shirtdesigner/jpg_design_exports/square_rounded_corners%20_vector-graphic_1331986667453.jpg

【问题讨论】：

标签： javascript jquery crop

【解决方案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>

【讨论】：

嗨！请避免发布“仅限链接”的答案。如果您的链接失效，此答案将无助于未来的用户。而是将代码添加到您的答案中。如果您这样做，则可以链接到“可视化工作”示例！

【解决方案2】：

你可以像这样实现边框半径

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

或您可以将此库用于边界半径 pie border radius

【讨论】：

【解决方案3】：

内部复杂的代码你可以这样做

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

});

<style>

.重要{ 边框半径：100px;

}

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

在前面插入

注意 1）您必须将图像保持为正方形，然后才能获得圆形，否则您将获得日食类型的图形。

【讨论】：