Редактировать изображения в браузере

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>
    );
}

И это работает.Но мне нужно, чтобы пользователь мог щелкнуть в любом месте и добавить указанные точки.Как мне этого добиться?Моя конечная цель примерно такая (добавлены красные круги):