npm 包 @jesobreira/react-avatar-edit 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 React 项目中，我们经常需要使用头像上传功能，为了方便头像编辑和裁剪，我们可以使用 @jesobreira/react-avatar-edit 这个 npm 包。下面就来详细介绍一下如何使用它。

第一步：安装

使用 npm 安装 @jesobreira/react-avatar-edit 包。

npm install @jesobreira/react-avatar-edit --save

第二步：导入

在 React 组件中导入 @jesobreira/react-avatar-edit 包。

import AvatarEditor from '@jesobreira/react-avatar-edit';

第三步：使用

创建一个 React 组件并在其中使用 <AvatarEditor /> 标签，如下所示：

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------ ---- --------------------------------

----- ------------ - -- -- -
  ----- ------- --------- - -------------

  ----- ---------- - ------ -- -
    --------------- -- ---- -------
  --

  ----- ------------ - --- -- -
    ----- ---- - ------------------
    ----- ------ - --- -------------
    ---------------- - -- -- -
      ------------------------
    --
    ---------------------------
  --

  ------ -
    -----
      -------------
        -------------
        -----------
        ------------
        -----------
        -----------
        -------------------
      --
      ------ ----------- ---------------- ----------------------- --
    ------
  --
--

------ ------- -------------

组件中主要用到了五个 props 参数：

image ：上传的图片。在 handleUpload 中获取到的图片，用 reader.readAsDataURL(file) 转为 base64 格式，并保存在 state 中；
width ：固定的宽度；
height ：固定的高度；
border ：边框宽度；
scale: 缩放比例，默认为 1
onCrop ：裁剪后的回调函数。回调函数接收一张压缩后的 base64 格式的图片，可以通过 setImage 方法更新 state，实现头像上传功能。

除此之外，我们还需要在组件中设置 input 标签，用于选择图片上传。

总结

使用 @jesobreira/react-avatar-edit 这个 npm 包，我们可以轻松实现头像上传和裁剪功能，提高我们的开发效率。希望本篇教程对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d092702382287f