在前端开发中，图片裁剪功能是很常见的需求。而 jcrop 就是一款功能强大、易于使用的图片裁剪插件，它能够帮助我们完成各种裁剪操作。下面我们来学习一下如何使用它。
安装
我们首先需要将 jcrop 安装到我们的项目中。在终端中输入以下命令即可：
npm install jcrop-0.9.8 --save
引入
安装完成后，在需要使用 jcrop 的页面中引入以下文件：
<link rel="stylesheet" href="./node_modules/jcrop-0.9.8/css/jquery.Jcrop.min.css"> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/jcrop-0.9.8/js/jquery.Jcrop.min.js"></script>
使用
接下来，我们就可以开始使用 jcrop 了。
HTML
我们需要为图片设置一个容器，并将图片放在容器中：
<div id="jcrop-container"> <img src="your-image-src" id="target" alt="preview"> </div>
需要注意的是，图片必须在容器中，这样才能正确的进行裁剪。
JavaScript
在页面加载完成后，我们先找到图片和容器：
$(function(){
let $target = $("#target");
let $container = $("#jcrop-container");
});然后，我们初始化 jcrop：
let jcrop_api = $.Jcrop($target, {
aspectRatio: 1, // 裁剪框长宽比为 1:1
setSelect: [0, 0, 200, 200], // 默认显示的裁剪框大小
onSelect: updateCoords // 当选择区域发生变化时的回调函数
});其中，aspectRatio 设置了裁剪框的长宽比，setSelect 设置了默认的裁剪框大小，onSelect 则设置了当选择区域发生变化时的回调函数，我们将在下方定义该函数。
回调函数
jcrop 还提供了一些回调函数，让我们可以得到各种裁剪的信息。
比如，在我们拖动选择区域时、改变选择区域的大小时，就可以得到当前的裁剪框的信息，通过这些信息，我们可以在页面上显示出当前选择区域的大小、位置等信息。
-- -------------------- ---- -------
-------- --------------- -
-- -----------------
--- - - ----
- - ----
- - ----
- - ----
-- ----------
---------------
---------------
---------------
---------------
-对于 jcrop 的其他回调函数，我们可以在官方文档中查看具体的介绍和使用方法。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ----------
----- ---------------- -----------------------------------------------------------
------- --------------------------------------------------------
------- -----------------------------------------------------------------
-------
-- --------- --
-------- -
----------------
------------
-------------
-----------
---------- ----- ------
-
--------
-------
------
---- ---------------------
---- -------------------- ----------- --------------
------
----
---- ----------- ---
-------- ----------- -------- -------
-------- ----------- -------- -------
-------- ----------- -------- -------
-------- ----------- -------- -------
--------
---- --------- ---
---- -------------------
--------
-- -------
--- ------- - -------------
--- ---------- - ----------------------
-- --- -----
--- --------- - ---------------- -
------------ --
---------- --- -- ---- -----
--------- ------------
---
-- ----
-------- --------------- -
--- - - ----
- - ----
- - ----
- - ----
-- -----------
---------------
---------------
---------------
---------------
-- ------
--- -- - --- - --
--- -- - --- - --
-------------------
------ ------------- - ---------------- - -----
------- ------------- - ----------------- - -----
----------- --- - ------------- - -- - -----
---------- --- - ------------- - -- - ----
---
-
---------
-------
-------总结
jcrop 是一款非常强大、易于使用的图片裁剪插件，它可以帮助我们完成各种裁剪操作。本文介绍了 jcrop 的安装、引入和使用方法，并提供了示例代码，希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53e07