javascript - ReactJS 使用表单获取外部图像作为输入

Question

我正在学习 ReactJS 并发现了这个不错的项目，您可以在其中使用不同的图像创建图像马赛克（演示）。但是，我想制作的不仅仅是一个预先确定的图像来制作马赛克，而是通过给出一个图像的链接来从图片创建马赛克，例如这个图片链接。

在代码中，有这部分决定从图像文件夹中选择哪张图片，

componentDidMount() {
    this.setState({
        target: STATIC + 'images/' + Images[1].name
    });
}

以及它创建马赛克的部分。

onClick={ this.clickedCanvas }
                    onLoadProgress={ this.loadProgressChanged }
                    colorBlending={ 0 }
                    width={ 3600 }
                    height={ 2650 }
                    columns={ 360 }
                    rows={ 265 }
                    sources={ Images.map(img => STATIC + 'images/' + img.name) } 
                    target={ this.state.target } />

所以想法是使用这样的简单形式从互联网上找到的图片中获取目标。

<form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>

所以我的问题是如何将输入与目标图像连接起来？

标签： javascriptreactjsformsimagestate