javascript - 允许用户调整其个人资料图片的位置

Question

我正在建立一个网站，并希望包含允许用户在上传时调整其个人资料图片位置的功能（图片的哪一部分由“img”元素显示）。例如，LinkedIn 就有这个功能。我搜索了如何实现该功能，但没有发现任何有用的信息。下面的代码就是我现在的代码：用户选择图像文件后，将其上传到firebase存储，然后网页将重新渲染，新图像将显示在网页上。我想知道是否有人可以给我一个关于如何将该功能添加到我现有代码中的线索。谢谢！

允许用户上传个人资料图片的客户端代码

    state = {
      image: "",
      edit: false
    }

    componentDidMount() {
      const { profile } = this.props;
      this.setState({
        image: profile.image
      })
    }

......

handleUpload = (e) => {
      e.preventDefault();
      const image = e.target.files[0];
      const { auth } = this.props;
      this.props.uploadImage(image, auth.uid);
  }

  openFiles = (e) => {
      e.preventDefault();
      const input = document.getElementById("imageinput");
      input.click();
  }

......

    render() {

      return (

......

                  <img src={this.state.image ? this.state.image : ditto}></img>
                  <input type="file" id="imageinput" hidden="hidden" onChange={this.handleUpload}></input>
                  <button onClick={this.openFiles}>Upload Profile Image</button>

......

Redux uploadImage 动作对象

export const uploadImage = ( image, userid ) => (dispatch) => {
    firebase.storage().ref('images/'+userid).put(image)
    .then(() => {
        return firebase.storage().ref(`images/`+userid).getDownloadURL()
    })
    .then((image) => {
        firebase.firestore().collection("users").doc(userid).update({
            image: image
        })
    }).then(() => {
        dispatch({ type: EDIT_SUCCESS });
    })
}

标签： javascriptreactjsfirebasefile-uploadredux