H5图片上传与裁剪（头像）

最新推荐文章于 2024-10-10 16:44:50 发布

糯米麻糖

最新推荐文章于 2024-10-10 16:44:50 发布

阅读量747

点赞数

分类专栏： antd 文章标签： javascript 图片上传

本文链接：https://blog.csdn.net/gkf6104/article/details/129358920

版权

本文介绍了如何在H5中实现头像上传和基本的图片裁剪功能。首先，通过调用移动端相机或相册获取图片，然后将图片放入画布。由于基于React框架，使用了react-cropper第三方插件来实现裁剪功能。

摘要由CSDN通过智能技术生成

背景
最近接到的需求中H5头像上传和实现基本的图片裁剪，这也是比较常见且典型的场景。

思路

1. 调起移动端相机拍照或相册功能；

2. 选择图片后，将选中的图片放入画布；

3. 因为基于react框架开发，所以使用了第三方插件react- cropper

代码实现

1. 封装react组件

import { useState } from "react";
import HooksCropperModal from "./HooksCropperModal";
import styles from "./index.module.less";

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 文件最大限制为5M

const Avator = () => {
  const [hooksModalVisible, setHooksModalVisible] = useState(false); // 裁剪图片
  const [hooksModalFile, setHooksModalFile] = useState(null); // 选取的img文件
  const [hooksResultImgUrl, setHooksResultImgUrl] = useState(null); // 裁剪后的img

  const handleHooksFileChange = (e) => {
    const file = e.target.files[0];

    if (file) {
      if (file.size <= MAX_FILE_SIZE) {
        setHooksModalFile(file);
        setHooksModalVisible(true)