如何在 JavaScript 中将文件转换为张量

Question

我正在尝试使用 MobileNet 创建一个简单的图像分类示例。我试图让它与react-dropzone 一起工作，在这种情况下，我最终需要将图像转换为Fileto的类型Tensor才能将其传递给model.classify.

我也尝试使用，fromPixels但为此，我必须将图像转换为ImageData.

export default function ImageClassification() {

  const [isModelLoaded, setModelLoaded] = useState(false);

  const [uploadedFile, setUploadedFile] = useState();

  const [classifier, setClassifier] = useState();

  useEffect(() => {

    async function modelReady() {

      console.log("Not loaded:" + isModelLoaded);

      setClassifier(

        await MobileNet.load().then(model => {

          setModelLoaded(true);

          return model;

        })

      );

    }

    modelReady();

  }, []);

  function onDrop(acceptedFiles: File[]) {

    console.log(acceptedFiles);

    setUploadedFile(acceptedFiles);

    console.log("After setting");

  }

  function prepareImage(inputFile: File) {

    // How to convert inputFile to Tensor???

    return image;

  }

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (

    <React.Fragment>

      {!isModelLoaded ? (

        <CircularProgress />

      ) : (

        <div {...getRootProps()}>

          <input {...getInputProps()} />

          {isDragActive ? (

            <p>Drop the files here.. </p>

          ) : (

            <p>Drag 'n' drop some files here, or click to select files</p>

          )}

          {uploadedFile &&

            uploadedFile.map((item: File) => {

              const input = prepareImage(item);

              classifier.classify(input);

              return <h1>{item.name}</h1>;

            })}

        </div>

      )}

    </React.Fragment>

  );

}

任何有关这些的帮助将不胜感激。

Answer 1

需要读取文件并将其结果分配给图像标签。加载图像后，可以将其转换为张量。&nbsp; &nbsp; const im = new Image()&nbsp; &nbsp; var fr = new FileReader();&nbsp; &nbsp; fr.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; im.src = fr.result;&nbsp; &nbsp; }&nbsp; &nbsp; fr.readAsDataURL(inputFile);&nbsp; &nbsp; im.onload = () => {&nbsp; &nbsp; &nbsp; const a = tf.browser.fromPixels(im)&nbsp; &nbsp; }