简介
jquery-jcrop 是一款基于 jQuery 的图片裁剪插件，可以通过 npm 包的方式使用。
安装
在项目根目录下执行以下命令进行安装：
npm install jquery-jcrop --save
使用
引入
在 html 文件中引入 jquery-jcrop 和 jQuery 库：
<script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.jcrop.min.js"></script>
HTML Markup
准备一个包含图片的容器，并为其添加一个 ID，如：
<div id="crop-container"> <img src="path/to/image.jpg" alt="image"> </div>
JavaScript 代码
在 JavaScript 中实例化 jquery-jcrop，并设置参数：
-- -------------------- ---- -------
------------ -
------------------ -------------
------------ --
--------- ------------
---
---
-------- --------------- -
-----------------
-----------------
-----------------
-----------------
-参数说明
jquery-jcrop 支持多种参数设置，这里列出比较常用的参数：
aspectRatio：裁剪区域的宽高比例，默认为自由裁剪。onSelect：当选择裁剪区域时触发的回调函数。setSelect：设置初始裁剪区域，可选值有"auto"、[x,y,x2,y2]或{x: x, y: y, x2: x2, y2: y2}。minSize和maxSize：设置裁剪区域的最小和最大尺寸。
更多参数详见官方文档。
回调函数
在选择裁剪区域时，可以通过回调函数获取裁剪区域的坐标信息，如上述代码中的 updateCoords 函数。
API 方法
除了设置参数和回调函数之外，jquery-jcrop 还提供了一些 API 方法，用于操作裁剪区域：
setSelect([x,y,x2,y2])：设置裁剪区域。release()：释放裁剪区域。disable()和enable()：禁用和启用插件。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------- ------------
----- ---------------- ------------------------------------
-------
--------------- -
------ ------
------- ------
------- - -----
--------- ---------
-
--------------- --- -
---------- -----
----------- -----
-
------- -
----------- -----
-
--------
-------
------
---- --------------------
---- ----------------------- ------------
------
------
---- ------------
-----------------
------ ----------- ------ --------- -
-----------------
------ ----------- ------ --------- -
--------------------
------ ----------- ------ --------- -
---------------------
------ ----------- ------ ---------
------
-------
------- -------------------------------------
------- -------------------------------------------
--------
------------ -
------------------ -------------
------------ --
--------- ------------
---
---
-------- --------------- -
-----------------
-----------------
----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------