react antd 实现图片自定义预览
本文最后更新于 604 天前,其中的信息可能已经有所发展或是发生改变。

功能需求

有这样一个需求,用户点击文字或者按钮,会弹出图片的预览界面,要求图片可旋转,可缩放以及可下载。由于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

本文链接:https://likepoems.com/articles/react-antd-photo-preview/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇