无法使用React.js将图像传递给ML5

时间:2019-04-28 12:46:48

标签: reactjs

我正在尝试ML5进行图像分类

我无法将图像传递给ML5预测功能。错误显示未提供输入图像。

我正在使用React Dropzone拖放图像,然后将其传递到ML5库

任何人都有将React与ML5集成的经验吗?如何将img传递给分类器以对图像进行分类?

感谢您的回复

class ml5Page extends Component {
  onDrop = async acceptedFiles => {
    try {
      const img = URL.createObjectURL(acceptedFiles[0]);
      const classifier = await ml5.imageClassifier("MobileNet");
      const results = await classifier.predict(img);
      console.log("@results ", results);
    } catch (error) {
      console.log(error);
      throw error;
    }
  };
  render() {
    return (
      <Content style={ContentStyle}>
        <div>
          <Dropzone onDrop={this.onDrop}>
            {({ getRootProps, getInputProps }) => (
              <section>
                <div {...getRootProps()}>
                  <input {...getInputProps()} />
                  <p>Drop Pic Here</p>
                </div>
              </section>
            )}
          </Dropzone>
        </div>
      </Content>
    );
  }
}

export default ml5Page;

1 个答案:

答案 0 :(得分:0)

设法使其起作用。似乎必须使用React.createRef()Working Codes for implementing React with ML5

从DOM中检索img。