巧用ANTD上传组件轻松实现图片裁剪，拒绝加载难题！

2023-06-06 23:37:56

ANTD上传组件：图片裁剪的最佳利器

导语

在当今快速发展的数字世界中，网站性能至关重要。而图片往往是网站中最大的资源之一，如果处理不当，可能会严重拖累加载速度。为了解决这个问题，ANTD上传组件应运而生，它提供了一系列强大的功能，让你轻松裁剪图片，大幅提升加载速度，为用户带来顺畅的体验。

ANTD图片裁剪的三大法宝

ANTD的图片裁剪功能分为三个关键步骤：

安装antd-img-crop包

npm install antd-img-crop --save

创建裁剪组件

import { Image, Modal, Button } from 'antd';
import ImgCrop from 'antd-img-crop';

class App extends React.Component {
  state = {
    fileList: [],
    previewVisible: false,
    previewImage: '',
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  render() {
    const { fileList, previewVisible, previewImage } = this.state;
    return (
      <div>
        <ImgCrop>
          <Image
            src={previewImage}
            width={200}
            style={{ display: 'block' }}
          />
        </ImgCrop>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <Image src={previewImage} style={{ width: '100%' }} />
        </Modal>
      </div>
    );
  }
}

裁剪图片

const file = fileList[0];
const reader = new FileReader();
reader.onload = () => {
  const image = new Image();
  image.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const { width, height } = image;
    canvas.width = width / 2;
    canvas.height = height / 2;
    ctx.drawImage(image, 0, 0, width / 2, height / 2);
    const dataURL = canvas.toDataURL('image/jpeg', 0.5);
    const blob = new Blob([dataURL], { type: 'image/jpeg' });
    const newFile = new File([blob], file.name, { type: 'image/jpeg' });
    fileList.push(newFile);
    this.setState({ fileList });
  };
  image.src = reader.result;
};
reader.readAsDataURL(file);