无法使用Reactjs将图像传递到ML5

Question

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

我无法将图像传递给ML5预测函数。错误显示No input image provided (未提供输入图像)。

我正在使用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;

Answer 1

设法让它起作用了。似乎必须使用React.createRef() Working Codes for implementing React with ML5从DOM中检索img