jQuery Jcrop 插件

jQuery Jcrop 插件是一款基于 jQuery 的图像裁剪插件，它可以方便地为用户提供图像裁剪功能。

特点

• 简单易用：只需几行代码就可以添加裁剪功能。
• 支持多种裁剪方式：包括按像素裁剪、按比例裁剪等。
• 支持图像预览和裁剪框移动、缩放。
• 兼容性良好：可以在各种浏览器和移动设备上正常运行。

安装

可以通过 CDN 来引入该插件：

<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>

也可以通过 npm 安装该插件：

npm install jquery-jcrop

使用

HTML

<div>
  <img src="image.jpg" id="jcrop-img" />
</div>

JavaScript

$(function() {
  $('#jcrop-img').Jcrop({
    aspectRatio: 1,
    setSelect: [100, 100, 200, 200],
    onSelect: updateCoords
  });
});

function updateCoords(c) {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
};

CSS

.Jcrop-holder {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #666;
}

API 参考

.Jcrop(options)

初始化 Jcrop 实例，可以在元素上调用。

options

• aspectRatio：Number，裁剪框宽高比，默认为自由裁剪。
• minSize：Array，裁剪框最小尺寸，如 [80, 80]。
• maxSize：Array，裁剪框最大尺寸，如 [400, 400]。
• onSelect：Function，当裁剪框被选择时调用的函数，传入选定的尺寸。
• onChange：Function，当裁剪框发生改变时调用的函数，传入选定的尺寸。
• setSelect：Array，初始选择的矩形区域，如 [10, 10, 100, 100]。

结语

jQuery Jcrop 插件是一款功能丰富、易于使用的图像裁剪插件，非常适合那些需要在网页上实现图像裁剪功能的开发者使用。如果你还没有使用过该插件，不妨试一试，相信你会爱上它的。