React:如何设置函数以使用来自状态的图像
React: How to setup function to use image from state
我的 React 组件中有一个 imageClassification 函数,它使用 document.getElementById const img = document.getElementById('animal_image');
.
从 img 标签中获取要分类的图像
通过文件输入上传的图像更新状态,然后传递给 img 标签
<img id="animal_image" src={profileImg} alt="a test" />
我如何更新下面的代码,以便 classifyImage 函数从通过文件输入上传图像时获取图像,而不是从 img 标签获取。即我如何在 classifyImage 函数中访问状态?
我查看了 filereader 文档,但仍然无法弄清楚。
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
要访问状态,您只需执行 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)
}
我的 React 组件中有一个 imageClassification 函数,它使用 document.getElementById const img = document.getElementById('animal_image');
.
通过文件输入上传的图像更新状态,然后传递给 img 标签
<img id="animal_image" src={profileImg} alt="a test" />
我如何更新下面的代码,以便 classifyImage 函数从通过文件输入上传图像时获取图像,而不是从 img 标签获取。即我如何在 classifyImage 函数中访问状态?
我查看了 filereader 文档,但仍然无法弄清楚。 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
要访问状态,您只需执行 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)
}