使用react-cropper对图片进行裁剪上传

·  阅读 2456

最近开发轮播图管理功能,为了使上传的图片符合轮播图的尺寸,在上传时需要将图片裁剪成一定的比例后才能上传。这里记录一下使用 antd 的 Upload 上传组件和 react-cropper 实现图片裁剪上传功能。

1. 安装 react-cropper 插件

yarn add react-cropper
// or   npm install react-cropper --save
复制代码

2. 实现思路

  • 在使用 antd 的 Upload 组件上传时,需要在上传之前,用FileReader读取图片,存下data: URL格式的Base64字符串以表示所读取文件的内容, 并在 beforeUpload 函数中返回 false, 阻止图片上传。

  • Copper 组件接受裁剪框的 长/宽、裁剪区域大小 等参数。

  • 用 Coppper 进行截图后,点击确定,使用 Cropper 的 getCroppedCanvas方法可以将裁剪区域的数据转换成canvas数据, 然后调用浏览器原生的toBlob方法将canvas数据转换成blob数据。最后将blob数据发给后端。

3. 具体代码实现


import React, { PureComponent } from 'react';
import { Button, Form, Row, Col, Drawer, Upload, Icon, Modal, notification } from 'antd';
import 'cropperjs/dist/cropper.css';
import Cropper from 'react-cropper';

export default class RenderDrawer extends PureComponent {
  super(props);
    this.state = {
      previewVisible: false, // 预览模态框
      previewImage: '', // 预览图片地址
      srcCropper: '', // 当前图片路径
      selectImgName: '', // 当前文件名称
      editImageModalVisible: false, // 裁剪模态框
      saveImgLoading: false, // 保存裁剪后的图片loading
    };

      // Upload 组件图片上传前调用的函数
    uploadBefore = file => {
      // 1. 校验文件大小
      const fileSize = maxFileSize * 1024 * 1024;
      if (file.size > fileSize) {
          file.status = 'error'; // eslint-disable-line
          file.response = `上传文件大小不能超过: ${fileSize / (1024 * 1024)}MB`; // eslint-disable-line
          return false;
      }

    // 1. FileReader
    // - FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
    // - 事件 FileReader.onload,在读取操作完成时触发
    // - 方法 
    const reader = new FileReader();
    // Image()函数将会创建一个新的HTMLImageElement实例, Image(width, height)
    // 它的功能等价于 document.createElement('img')
    const image = new Image(); 

    reader.readAsDataURL(file); //开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
    // 1. img.onload
    // - img.onload 是回调函数,当img载入完成,就执行这个函数
    // - 当image的src发生改变,浏览器就会跑去加载这个src里的资源。这个操作是异步的,就是说,js不会傻傻地在原地等待图片的加载,而是继续读代码,直到图片加载完成,触发onload事件,js才会回来执行onload里面的内容。
    
    // 2. reader.onload
    // - 当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候,会触发一个 load 事件。从而可以使用  FileReader.onload 属性对该事件进行处理。
    
    reader.onload = e => { // onload 事件在图片加载完成后立即执行。
      image.src = reader.result;
      image.onload = () => {
        this.setState({
          srcCropper: e.target.result, // cropper的图片路径
          selectImgName: file.name, // 文件名称
          // selectImgSize: file.size / 1024 / 1024, // 文件大小
          // selectImgSuffix: file.type.split('/')[1], // 文件类型
          editImageModalVisible: true, // 打开控制裁剪弹窗的变量,为true即弹窗
        });
      };
    };
    return false; // 返回false,阻止文件上传
  };
}

  // 保存裁剪后的图片
  handleSaveImg = () => {
    const { dispatch } = this.props;
    const { selectImgName } = this.state;
    if (this.state.srcCropper) {
      this.setState({ saveImgLoading: true });
      // getCroppedCanvas方法可以将裁剪区域的数据转换成canvas数据
      // 然后调用浏览器原生的toBlob方法将canvas数据转换成blob数据
      this.cropper.getCroppedCanvas().toBlob(blob => {
        const formData = new FormData();
     // 第三个参数为文件名,可选填. formData.append(name, value, filename);vlaue只支持blob string File
        formData.append('file', blob, selectImgName);
        // 之后将blob数据发送至后端
        dispatch({
          type: 'manageMarquee/uploadImage',
          payload: formData,
        }).then(res => {
          if (res && !res.failed) {
            this.setState({
              saveImgLoading: false,
              editImageModalVisible: false,
              fileList: [
                {
                  uid: -1,
                  name: res.fileName,
                  status: 'done',
                  url: res.fileUrl,
                },
              ],
            });
            notification.success({
              message: 上传成功!
            });
          }
        });
      });
    }
  };

  render() {
       const { srcCropper = '', saveImgLoading = false, fileList = [] } = this.state;
       const fileProps = {
          showDownloadIcon: true,
          showPreviewIcon,
          fileListMaxLength: 1,
          fileList,
          action:  'plugin/address',
          accept: ['image/jpeg', 'image/jpg', 'image/png'],
          headers: {
            Authorization: `Bearer ${cookieToken}`,
           },
          beforeUpload: this.uploadBefore,
          onPreview: this.setState({previewVisible: true});
          onRemove: () => {
            this.setState({
              fileList: [],
            });
        },
      };

  return (
      <>
        // antd 的上传组件
        <Upload
            listType="picture-card"
            // onPreview={this.handlePreview}
            {...fileProps}
            >
            {fileList.length >= 1 ? null : (
                <div>
                    <Icon type="plus" />
                    <div className="ant-upload-text">Upload</div>
                </div>
            )}
        </Upload>
      
        // 裁剪模态框
        <Modal
          className="upload_cropper_modal"
          visible={this.state.editImageModalVisible}
          width={820}
          onCancel={() => this.setState({ editImageModalVisible: false })}
          title='请选择剪裁区域'
          footer={[
            <Button type="primary" loading={saveImgLoading} onClick={this.handleSaveImg}>
              确定
            </Button>,
            <Button onClick={() => this.setState({ editImageModalVisible: false })}>
              取消
            </Button>,
          ]}
        >
          <Cropper
            src={this.state.srcCropper || ''} // 图片路径,即是base64的值,在Upload上传的时候获取到的
            ref={cropper => {
              this.cropper = cropper;
            }}
            preview=".uploadCrop"
            viewMode={1} // 定义cropper的视图模式
            zoomable={false} // 是否允许放大图像
            // movable
            guides={false} // 显示在裁剪框上方的虚线
            background={false} // 是否显示背景的马赛克
            rotatable={false} // 是否旋转
            autoCropArea={1} // 默认值0.8(图片的80%)。--0-1之间的数值,定义自动剪裁区域的大小
            style={{ width: '100%', height: '400px' }}
            aspectRatio={1152 / 382} // 固定为1:1  可以自己设置比例, 默认情况为自由比例
            // cropBoxResizable={false} // 默认true ,是否允许拖动 改变裁剪框大小
            // cropBoxMovable  // 是否可以拖拽裁剪框 默认true
            dragMode="move" // 拖动模式, 默认crop当鼠标 点击一处时根据这个点重新生成一个 裁剪框,move可以拖动图片,none:图片不能拖动
            center
          />
        </Modal>

        // 预览模态框
         <Modal visible={previewVisible} footer={null} onCancel={() => {this.setState({previewVisible: false})}}>
          <img alt="" style={{ width: '100%' }} src={previewImage} />
        </Modal>
  </>
)
}
}

复制代码

4. 实现效果

裁剪框效果图 整体效果

5. 补充

1. FileReader 方法

参考文章 www.cnblogs.com/dongxixi/p/…

  • readAsText 读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可; 而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,同时也不是最理想的读取文件的方式

    image.png

  • readAsDataURL会将文件内容进行base64编码后输出

    image.png

  • readAsBinaryString 与readAsText不同的是,readAsBinaryString函数会按字节读取文件内容。 然而诸如0101的二进制数据只能被机器识别,若想对外可见,还是需要进行一次编码,而readAsBinaryString的结果就是读取二进制并编码后的内容。 尽管readAsBinaryString方法可以按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,也不推荐使用。 如:测试的图片文件原大小为6764 字节,而通过readAsBinaryString读取后,内容被扩充到10092个字节

    image.png

2. FileReader 应用

我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片。 在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。 通过FileReader的readAsDataURL方法,我们可以不经过后台,直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程,减少服务器端无用的图片资源

对于图片上传,我们也可以先将图片转换为base64进行传输,此时由于传输的图片内容就是一段字符串,故上传接口可以当做普通post接口处理,当图片传输到后台后,可以在转换为文件实体存储。 当然,考虑到base64转换效率及其本身的大小,本方法还是适合于上传内容简单或所占内存较小的文件。

3. 使用FormData对象上传文件

FormData 接口提供了一种表示表单数据的键值对的构造方式,使用append()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”

4. toDataURL 与 toBlob

toBlob()和toDataURL()方法都是可以的,但个人推荐使用toBlob()方法

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改