React：如何设置函数以使用来自状态的图像

Question

我的 react 组件中有一个 imageClassification 函数，它使用 document.getElementById const img = document.getElementById('animal_image'); 从 img 标签中获取要分类的图像。

通过文件输入上传的图像更新状态，然后传递给 img 标签 <img id="animal_image" src={profileImg} alt="a test" />

如何更新下面的代码，以便classifyImage 函数从通过文件输入上传图像时获取图像，而不是从img 标签获取。即我如何在classifyImage函数中访问状态？

我查看了文件阅读器文档，但仍然无法弄清楚。 https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

import React, { Component } from 'react';
import * as automl from '@tensorflow/tfjs-automl';
import '@tensorflow/tfjs-backend-webgl';
import SampleDog from '../images/dogTest.jpg';
import './imageloader.css';

export class ImageLoader extends Component {

    state={
        profileImg: 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png'
      }

    fileSelectedHandle = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = () =>{
         if(reader.readyState === 2){
            this.setState({profileImg: reader.result})
        }
        }
        reader.readAsDataURL(file)
    }


    classifyImage = async () => {
        const model = await automl.loadImageClassification('./image_classification_model_v1/model.json')

        const img = document.getElementById('animal_image');

        const predictions = await model.classify(img)

        console.log('predictions', predictions)
    }

    render() {

        const { profileImg } = this.state

        return (
            <div className="container">
               <div className="img-main">
                <h2>Image Classification Demo</h2>
                <p>Upload an image of a cat or dog to check the prediction score</p>
                <div >
                    <input 
                        type="file" 
                        accept="image/*"
                        name="image-upload"
                        id="input"
                        onChange={this.fileSelectedHandle} 
                    />
                </div>
                <div>
                    <img id="animal_image" src={profileImg} alt="a test" />
                </div>
                    
                <button 
                    className="img-loader-button"
                    onClick={() => this.classifyImage()}>Predict Score
                </button>
               </div>

            </div>
        )
    }
}

export default ImageLoader

Answer 1

要访问该状态，您只需执行model.classify(this.state.profileImg)。但这不能直接工作，因为 tensorflow 需要一个图像元素或 ImageData 作为输入。

所以我猜你还是需要创建一个图像元素。

fileSelectedHandle = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = () =>{
      if(reader.readyState === 2) {
        const img = document.createElement("img");
        img.src = reader.result;
        this.setState({ profileImg: img });
      }
    }
    reader.readAsDataURL(file)
}