Question

有没有人知道要裁剪图像的库以获得圆角输出？我发现了这个https://foliotek.github.io/Croppie/，但它只会将图像裁剪成cicrle。我想将图像裁剪为此形状：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

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

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

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

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）你必须把图像保持为正方形，然后你可以得到圆圈，否则你会得到日食的形象。

使用Jquery的圆角裁剪图像

3 个答案: