react定义图片预览

1.控制图片的信息

imgScale: '100%', // 图片放大缩小
imgTransform: '', // 旋转
imgCurrent: 0, // 当前的旋转
x: 0, // x移动
y: 0, // y移动

 

2.执行用的函数

      // 放大
    imgToBigger() {
      this.setState({ imgScale: `${parseInt(this.state.imgScale, 10) + 25}%` });
    }

    // 缩小
    imgToSmaller() {
      this.setState({ imgScale: `${parseInt(this.state.imgScale, 10) - 25}%` });
    }

    // 滚轮缩放
    handleZoom(e) {
      if (e.nativeEvent.deltaY <= 0) {
        this.setState({ imgScale: `${parseInt(this.state.imgScale, 10) + 18}%` }); // 图片宽度每次增加18
      } else if (e.nativeEvent.deltaY > 0) {
        this.setState({ imgScale: `${parseInt(this.state.imgScale, 10) - 18 > 0 ? parseInt(this.state.imgScale, 10) - 18 : parseInt(this.state.imgScale, 10)}%` }); // 图片宽度
      }
    }

    // 拖拽
    moveImg = (ev) => {
      const { x, y } = this.state;
      ev.preventDefault();
      const disx = ev.pageX - x;
      const disy = ev.pageY - y;
      document.onmousemove = (e) => {
        this.setState({
          x: e.pageX - disx,
          y: e.pageY - disy,
        });
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    }

    // 左旋转
    imgToLeftRoll() {
      const a = (this.state.imgCurrent - 90) % 360;
      this.setState({ imgTransform: `rotate(${a}deg)`, imgCurrent: a });
    }

    // 右旋转
    imgToRightRoll() {
      const a = (this.state.imgCurrent + 90) % 360;
      this.setState({ imgTransform: `rotate(${a}deg)`, imgCurrent: a });
    } 

3.运用的组件

              <Modal
                width="auto"
                centered="true"
                overflow="hidden"
                visible={previewVisible}
                footer={[
                  <scmp.Div margin="0 auto" textAlign="center" key="Modal">
                    <scmp.AntdButton
                      border="none"
                      padding="5px 8px"
                      title="amplify"
                      onClick={() => this.imgToBigger()} // 点击放大
                    >
                      <ZoomInOutlined />
                    </scmp.AntdButton>
                    <scmp.AntdButton
                      border="none"
                      padding="5px 8px"
                      title="reduce"
                      onClick={() => this.imgToSmaller()} // 点击缩小
                    >
                      <ZoomOutOutlined />
                    </scmp.AntdButton>
                    <scmp.AntdButton
                      border="none"
                      padding="5px 8px"
                      title="Counterclockwise rotation"
                      onClick={() => this.imgToLeftRoll()} // 左旋转
                    >
                      <UndoOutlined />
                    </scmp.AntdButton>
                    <scmp.AntdButton
                      border="none"
                      padding="5px 8px"
                      title="Clockwise rotation"
                      onClick={() => this.imgToRightRoll()} // 右旋转
                    >
                      <RedoOutlined />
                    </scmp.AntdButton>
                  </scmp.Div>,
                ]}
                onCancel={this.handleCancel} // 作废的时候把改的参数还原
                title="Preview"
              >
                <div
                  width="800px"
                  height="600px"
                  position="relative"
                  onMouseDown={this.moveImg} // 拖拽事件
                  onWheel={this.handleZoom} // 缩放事件
                >
                  <div
                    width="wrap_content"
                    height="wrap_content"
                    position="absolute"
                    top="50%"
                    left="50%"
                    transform="translate(-50%, -50%)"
                  >
                    <img
                      width="wrap_content"
                      maxWidth="800px"
                      height="wrap_content"
                      position="relative"
                      // onMouseMove={this.handleMouseMove}
                      style={{
                        imageRendering: 'pixelated',
                        scale: imgScale,
                        transform: imgTransform,
                        left: `${x}px`,
                        top: `${y}px`,
                        // transformOrigin: `${centreX}px ${centreY}px`,
                      }}
                      alt="example"
                      src={previewImage}
                    />
                  </div>
                </div>
              </Modal>