随着前端技术的进步，裁剪图片已经不再是一个难题。在市面上有许多工具可以帮助你实现图片裁剪，其中一种很实用的就是 nakaji-dayo-react-cropper。nakaji-dayo-react-cropper 是一个基于 React.js 的图片裁剪工具，它提供了许多易于使用的配置选项，让你能够轻松地进行图片裁剪。在本篇文章中，我们将介绍 nakaji-dayo-react-cropper 的使用方法，并以示例代码说明如何使用这个包。
安装
首先，你需要在本地安装 nakaji-dayo-react-cropper。你可以在你的项目文件夹中使用 npm 进行安装：
npm install nakaji-dayo-react-cropper --save
用法
nakaji-dayo-react-cropper 提供了一些易于使用的 API，通过配置选项我们可以定制化图片裁剪。让我们先来看一下这个核心的用法：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------------------------
----- ----------- ------- --------------- -
----- - -
---------------- ---
--------- --
-
---------------- - --- -- -
-------------------
--- ------ - --- -------------
--- ---- - ------------------
---------------- - -- -- -
---------------
---------------- -------------
---
-
---------------------------
-
---------- - ---------- -- -
--------------- -------- ---
-
-------- -
------ -
-----
------ ----------- -------------------------------- --
--------
----------------------------------
----------------------
--
------
-
-
-
------ ------- ------------这段代码演示了 nakaji-dayo-react-cropper 的最基本使用。你需要在你的组件中导入 Cropper 组件。Cropper 接收两个必须的属性：image 和 crop。image 属性用于指定待裁剪图片的 URL。crop 属性是一个回调函数，裁剪完成后将被触发。在回调函数中，将返回一个包含裁剪信息的对象 cropData。
配置选项
nakaji-dayo-react-cropper 提供了许多配置选项，允许你根据你的需求来定制化图片裁剪。现在我们来看一下这些设置：
aspectRatio
设置裁剪的比例。默认值为自由裁剪。
<Cropper
aspectRatio={16 / 9}
/>viewMode
设置图片的裁剪模式。默认值为 0，表示只要选定的画布比图片大就可以工作。1 表示保持图片原始大小，以适应画布。2 表示保持图片原始大小并且允许缩放。
<Cropper
viewMode={1}
/>zoomOnWheel
设置是否允许在裁剪时使用鼠标滚轮缩放图片。默认值为 true。
<Cropper
zoomOnWheel={false}
/>zoomOnTouch
设置是否允许在裁剪时使用触摸缩放图片。默认值为 true。
<Cropper
zoomOnTouch={false}
/>minCropBoxWidth
设置裁剪框的最小宽度。默认值为 0。
<Cropper
minCropBoxWidth={100}
/>minCropBoxHeight
设置裁剪框的最小高度。默认值为 0。
<Cropper
minCropBoxHeight={100}
/>ready
当图片已被加载时，回调函数将被激活。回调函数接收裁剪器的实例 Cropper。
<Cropper
ready={(c) => console.log(c)}
/>dragMode
设置拖动时裁剪器的行为。你可以传递一个 "crop" 或 "move" 值。默认为 "crop"。
<Cropper
dragMode={'move'}
/>更多选项请参考 GitHub Repo。
示例代码
在这个示例中，我们将演示如何使用 nakaji-dayo-react-cropper 来裁剪一张图片并将其保存到本地。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------------------------
----- ----------- ------- --------------- -
----- - -
---------------- ---
---------------- --
-
---------------- - --- -- -
-------------------
--- ------ - --- -------------
--- ---- - ------------------
---------------- - -- -- -
---------------
---------------- -------------
---
-
---------------------------
-
---------- - ---------- -- -
----- ------ - -------------------------------------
----- --------------- - -------------------
--------------- --------------- ---
-
-------- -
------ -
-----
------ ----------- -------------------------------- --
--------
-------------
----------------------------------
----------------------
--
-----
----------- -----------
-
-------------------------- --
---- -------------------------------- --
-
------
------
-
-
-
------ ------- ------------这段代码首先会让用户选择要裁剪的图片。当用户提交图片之后，我们会将其显示在裁剪器中。在用户完成裁剪后，我们将使用 getCroppedCanvas() 方法来获取新图片的“data url”，并将其保存在状态中。最后，我们可以在页面上展示新的裁剪图像。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551b981e8991b448cf1a6