0

我正在尝试使用 React-cropper 但我有问题。所以想法是我想获取图像然后裁剪两次，所以我使用 switch 来改变阶段，在第一阶段我拍摄原始图片，裁剪它并将 setState 设置为 big_logo，然后我想移动到阶段 3 并再次拍摄原始图片，裁剪它并将状态设置为 small_logo。问题是它从来没有看到小标志，该功能甚至没有启动，也不知道为什么。

onCropSaveBig(param) {
    const croppedBigLogo = this.refs.cropper.getCroppedCanvas({width: 60, height: 60}).toDataURL();
    this.setState({ big_logo: croppedBigLogo });
  }

  onCropSaveSmall(param) {
    console.log("works");
    const croppedSmallLogo = this.refs.cropper.getCroppedCanvas({width: 100, height: 25}).toDataURL();
    this.setState({ small_logo: croppedSmallLogo });

    console.log(this.state);
  }


 render() {
    let panel;

    switch (this.state.phase) {
      case 1:
        panel = (
          <>
            <h2>Upload logo</h2>
            {DropFile(this.onDrop)}
            <h2>Logo Library</h2>
            {LogoLibrary(tests)}
          </>
        );
        break;

      case 2:
        panel = (
          <>
            <h2>Customize logo</h2>
            <Cropper
              ref="cropper"
              crop={e => this.onCropSaveBig(e)}
              src={this.state.logo}
              aspectRatio={1}
              style={{ height: 450 }}
            />
            <button
              className="btn btn-success"
              onClick={() => this.setState({ phase: 3 })}
            >
              Save and continue
            </button>
            <button
              className="btn btn-failed"
              onClick={() => this.setState({ phase: 1 })}
            >
              Cancel
            </button>
          </>
        );
        break;

      case 3:
        panel = (
          <>
            <h2>Customize logo</h2>
            <Cropper
              ref="cropper"
              crop={e => this.onCropSaveSmall(e)}
              src={this.state.logo}
              aspectRatio={4 / 1}
              style={{ height: 450 }}
            />
            <button
              className="btn btn-success"
            >
              Save
            </button>
            <button
              className="btn btn-failed"
              onClick={() => this.setState({ phase: 3 })}
            >
              Cancel
            </button>
          </>
        );
        break;
    }

    return <div id="right_container">{panel}</div>;
  }
4

1 回答 1

1

尝试通过按钮启动功能，而不是在裁剪器中，然后更改功能内部的阶段，而不是在 onClick 按钮中设置它，如下所示：

onCropSaveBig(param) {
    const croppedBigLogo = this.refs.cropper.getCroppedCanvas({width: 60, height: 60}).toDataURL();
    this.setState({ big_logo: croppedBigLogo, phase: 3 });
  }

  onCropSaveSmall(param) {
    console.log("works");
    const croppedSmallLogo = this.refs.cropper.getCroppedCanvas({width: 100, height: 25}).toDataURL();
    this.setState({ small_logo: croppedSmallLogo });

  }


case 2:
    panel = (
      <>
        <h2>Customize logo</h2>
        <Cropper
          ref="cropper"
          src={this.state.logo}
          aspectRatio={1}
          style={{ height: 450 }}
        />
        <button
          className="btn btn-success"
          onClick={() => this.onCropSaveBig()}

        >
          Save and continue
        </button>
        <button
          className="btn btn-failed"
          onClick={() => this.setState({ phase: 1 })}
        >
          Cancel
        </button>
      </>
    );
    break;

  case 3:
    panel = (
      <>
        <h2>Customize logo</h2>
        <Cropper
          ref="cropper"
          src={this.state.logo}
          aspectRatio={4 / 1}
          style={{ height: 450 }}
        />
        <button
          className="btn btn-success"
          onClick={() => this.onCropSaveSmall()}
        >
          Save
        </button>
        <button
          className="btn btn-failed"
          onClick={() => this.setState({ phase: 3 })}
        >
          Cancel
        </button>
      </>
    );
    break;
}
于 2019-10-14T09:22:34.717 回答