200326 TIL

• 오늘 생긴 에러: this.props.history X(redirection in react)

  • redirection-using-axios-an-react
    https://stackoverflow.com/questions/53900739/redirection-using-axios-an-react

  • ignoring ref with broken name
    

  • react-image-upload 사용시 detect 불안정
    => form data 활용
    

import React, { useEffect, useState } from "react";
import ImageUploader from "react-images-upload";
import { createWorker } from "tesseract.js";
import { StepConnector } from "@material-ui/core";
import image from "./reactjs-redux.jpeg";
import image_png from "./js.png";
//* (ref: https://www.npmjs.com/package/react-images-upload)

export default class FileUploader_image extends React.Component {
constructor(props) {
super(props);
this.state = {
image: image,
ocr: "Recognizing..."
};
this.onDrop = this.onDrop.bind(this);
this.doOCR = this.doOCR.bind(this);
// this.detectText = this.detectText.bind(this);
}

worker = createWorker({
logger: m => console.log(m)
});

onDrop(imageData) {
console.log(imageData);
// Tesseract.recognize(imageData, "eng").then(function(result) {
// console.log(result);
// });
this.setState({
image: imageData
});
}

doOCR = async () => {
// console.log("image", this.state.image);
await this.worker.load();
await this.worker.loadLanguage("eng");
await this.worker.initialize("eng");
const {
data: { text }
// } = await this.worker.recognize(this.state.image);
//? } = await this.worker.recognize(image);
// } = await this.worker.recognize(image);
} = await this.worker.recognize(image_png);

// setOCR(text);
this.setState({
  ocr: text
});

console.log("text", text);
this.props.handleImage(text);

};

// setOCR() {
// this.setState({
// ocr: text
// });
// }

// componentDidMount() {
// this.doOCR();
// }

render() {
const { handleImage } = this.props;
return (

  <div>
    <h3>Image File Upload</h3>
    <ImageUploader
      // {...props}
      withIcon={true}
      withPreview={true}
      onChange={this.onDrop}
      imgExtension={[".jpg", ".gif", ".png"]}
      maxFileSize={5242880}
      fileSizeError="file size is too big"
      fileTypeError="is not supported file extension"
    />
    <button onClick={handleImage}>image</button>
    <button onClick={this.doOCR}>detect</button>
    <div>{this.ocr}</div>
  </div>
);

}
}