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

如何在JavaScript中将文件转换为张量,javascript,reactjs,tensor,tensorflow.js,react-dropzone,Javascript,Reactjs,Tensor,Tensorflow.js,React Dropzone,我正在尝试使用MobileNet创建一个简单的图像分类示例。 我试图使它与我最终遇到的情况一致,我需要将文件类型的图像转换为张量,以便能够将其传递到模型。分类 我也尝试过使用fromPixels,但为此,我必须将图像转换为ImageData export default function ImageClassification() { const [isModelLoaded, setModelLoaded] = useState(false); const [uploadedFile,

我正在尝试使用MobileNet创建一个简单的图像分类示例。 我试图使它与我最终遇到的情况一致,我需要将
文件
类型的图像转换为
张量
,以便能够将其传递到
模型。分类

我也尝试过使用
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>
  );
}
导出默认函数ImageClassification(){
const[isModelLoaded,setModelLoaded]=useState(false);
const[uploadedFile,setUploadedFile]=useState();
const[classifier,setClassifier]=useState();
useffect(()=>{
异步函数modelReady(){
console.log(“未加载:+isModelLoaded”);
集分类器(
等待MobileNet.load()。然后(模型=>{
setModelLoaded(真);
收益模型;
})
);
}
modelReady();
}, []);
函数onDrop(acceptedFiles:File[]{
console.log(acceptedFiles);
setUploadedFile(acceptedFiles);
console.log(“设置后”);
}
函数prepareImage(inputFile:File){
//如何将输入文件转换为张量???
返回图像;
}
const{getRootProps,getInputProps,isDragActive}=useDropzone({onDrop});
返回(
{是吗(
) : (
{isDragActive(
把文件放在这里

) : ( 将一些文件拖放到此处,或单击以选择文件

)} {上传文件&& uploadedFile.map((项目:文件)=>{ 常数输入=准备年龄(项目); 分类器。分类(输入); 返回{item.name}; })} )} ); }

如果有任何帮助,我们将不胜感激。

需要读取文件并将其结果分配给图像标签。加载图像后,可以将其转换为张量

    const im = new Image()
    var fr = new FileReader();
    fr.onload = function () {
        im.src = fr.result;
    }
    fr.readAsDataURL(inputFile);
    im.onload = () => {
      const a = tf.browser.fromPixels(im)
    }