功能需求

有这样一个需求，用户点击文字或者按钮，会弹出图片的预览界面，要求图片可旋转，可缩放以及可下载。由于antd组件的Image的预览窗口不包含图片下载的功能，所以这里通过modal对img添加预览模块。

实现过程

代码如下：

import React from 'react';
import './style.css';
import { Button, Modal } from 'antd';
import {
  ZoomInOutlined,
  ZoomOutOutlined,
  UndoOutlined,
  RedoOutlined,
  DownloadOutlined,
} from '@ant-design/icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgSrc:
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      imageVisible: false,
      imgScale: '100%',
      imgTransform: '',
      imgCurrent: 0,
    };
  }

  closeImagePreviewModel = () => {
    this.setState({
      imageVisible: false,
      imgScale: '100%',
      imgTransform: '',
      imgCurrent: 0,
    });
  };
  //放大
  imgToBigger = () => {
    let a = parseInt(this.state.imgScale) + 5 + '%';
    this.setState({ imgScale: a });
  };
  //缩小
  imgToSmaller = () => {
    let a = parseInt(this.state.imgScale) + -5 + '%';
    this.setState({ imgScale: a });
  };
  //左旋转
  imgToLeftRoll = () => {
    let a = (this.state.imgCurrent - 90) % 360;
    this.setState({ imgTransform: 'rotate(' + a + 'deg)', imgCurrent: a });
  };
  //右旋转
  imgToRightRoll = () => {
    let a = (this.state.imgCurrent + 90) % 360;
    this.setState({ imgTransform: 'rotate(' + a + 'deg)', imgCurrent: a });
  };
  // 下载
  downloadImage = () => {
    const imgUrl = this.state.imgSrc;
    const xhr = new XMLHttpRequest();
    let url = imgUrl;
    xhr.responseType = 'blob';
    xhr.onload = function () {
      if (this.status == '200') {
        let blob = this.response;
        let a = document.createElement('a');
        a.style = 'display:none';
        const reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = function (e) {
          a.download = 'test.jpg';
          a.href = e.target.result;
          document.body.append(a);
          a.click();
          a.remove();
        };
      }
    };
    xhr.open('get', url, true);
    xhr.send();
  };

  render = () => {
    const { imgScale, imgSrc, imgTransform, imageVisible } = this.state;
    return (
      <div>
        <Button
          onClick={() => {
            this.setState({ imageVisible: true });
          }}
        >
          预览图片
        </Button>
        <Modal
          title="图片预览"
          visible={imageVisible}
          onCancel={this.closeImagePreviewModel}
          style={{
            top: 0,
            maxWidth: '100vw',
            paddingBottom: 0,
          }}
          bodyStyle={{
            textAlign: 'center',
            height: 'calc(100vh - 118px)',
            overflowY: 'auto',
          }}
          width="100vw"
          footer={[
            <div style={{ margin: '0 auto', textAlign: 'center' }}>
              <Button
                style={{ border: 'none', padding: '5px 8px' }}
                title="放大"
                onClick={() => this.imgToBigger()}
              >
                <ZoomInOutlined />
              </Button>
              <Button
                style={{ border: 'none', padding: '5px 8px' }}
                title="缩小"
                onClick={() => this.imgToSmaller()}
              >
                <ZoomOutOutlined />
              </Button>
              <Button
                style={{ border: 'none', padding: '5px 8px' }}
                title="逆时针旋转"
                onClick={() => this.imgToLeftRoll()}
              >
                <UndoOutlined />
              </Button>
              <Button
                style={{ border: 'none', padding: '5px 8px' }}
                title="顺时针旋转"
                onClick={() => this.imgToRightRoll()}
              >
                <RedoOutlined />
              </Button>
              <Button
                style={{ border: 'none', padding: '5px 8px' }}
                title="下载"
                onClick={() => this.downloadImage()}
              >
                <DownloadOutlined />
              </Button>
            </div>,
          ]}
        >
          <img
            src={imgSrc}
            style={{
              width: 'auto',
              height: 'auto',
              maxWidth: '100vw',
              maxHeight: 'calc(100vh - 158px)',
              position: 'relative',
              margin: '0 auto',
              scale: imgScale,
              transform: imgTransform,
            }}
          />
        </Modal>
      </div>
    );
  };
}

实现效果

React antd 自定义图片预览实现

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=29rhczmu4qzo8