在浏览器中编辑图像

Question

我想先编辑用户在浏览器中上传的图像，然后再将其发送到服务器。主要是我希望用户能够在其选择的图片上添加点。现在，我将图片上传并显示在浏览器中，如下所示：

render() {
    const {user} = this.state;
    return (
        <div style={{marginTop: 150}}>
            <TakePictureComponent setImage={this.setImage}/>
            <DisplayPictureComponent image={this.state.image}/>
        </div>
    );
}

TakePictureComponent：

handleChange(e) {
    const {files} = e.target;
    this.props.setImage(files[0]);
    this.setState({image: files[0]});
}

render() {
    return (
        <div>
            <input onChange={this.handleChange} type="file" accept="image/jpg" capture="camera"/>
        </div>
    );
}

DisplayPictureComponent：

componentWillReceiveProps(nextProps) {
    const reader = new FileReader();
    reader.onload = e => this.setState({image: e.target.result});
    reader.readAsDataURL(nextProps.image);
}

render() {
    return (
        <div>
            <img src={this.state.image} alt={''}/>
        </div>
    );
}

这有效。但是我需要用户能够在任何地方单击并添加所述点。我该如何实现？我的最终目标是这样的（添加了红色圆圈）：