Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us
React Native + Express + Tesseract

React Native + Express: Criando um APP que extrai textos de fotos – Parte 1


Atualmente é comum no cadastro de APPs de fintechs como
Nubank, Banco Inter e Neon uma etapa de envio de fotos de documentos como RG e CPF, os textos desses documentos são extraidos e processados para verificar a autenticidade deles (automaticamente).

Essa tecnologia que extrai textos de imagens (documentos escaneados, fotos, pdf’s de imagem) é chamada de OCR (Optical Character Recognition) e você vai descobrir como utiliza-la.

Nesse artigo você vai aprender como criar um APP Mobile (usando React Native + Express + Tesseract.js) que vai utilizar OCR para extração de textos de fotos tiradas com o APP, então vem com a gente 😁

 

O que vamos desenvolver:

Para melhorar a apresentação do conteúdo este tutorial será dividido em duas partes, na parte 1 aprenderemos a criar uma API com Express que extrai textos de imagens usando Tesseract.js e retorna via Json e na parte 2 desenvolveremos um aplicativo com React Native que se conecta a API para converter as frases das fotografias tiradas.

Caso você deseje ver os códigos do projeto completo: Link do projeto no GitHub

 

Nossas ferramentas:

  • Nodejs
  • Yarn
  • Tesseract.js
  • Postman
  • Express

Obs: Neste artigo vamos utilizar o Yarn (você pode usar o npm se desejar), então pra quem não tem o Yarn, só ir neste link das docs e instalar: https://yarnpkg.com/en/docs/install

 

Configurando o projeto

1 – Inicialmente criaremos a pasta do nosso projeto e inicializaremos o yarn com:

2 – Uma vez inicializado o yarn, vamos adicionar as dependências básicas do express:

3 – Agora instalaremos o babel para usar os recursos do ES6+:

4 – Crie um arquivo na raiz do projeto chamado .babelrc e adicione o seguinte conteúdo:

5 – Para facilitar a execução do babel ao iniciar nosso servidor, adicione ao package.json o seguinte conteúdo:

Seu package.json deve ficar da seguinte forma:

Com isso já podemos dar início a configuração do tesseract.

 

Adicionando o Tesseract.js ao projeto

O Tesseract.js é uma implementação em puro javascript da biblioteca Tesseract OCR que foi inicialmente desenvolvida pela HP entre 1985 e 1994 e que é atualmente mantida pelo google.

Para instalar o Tesseract.js é necessário instalar o Tesseract OCR, neste artigo será utilizada uma instalação para Ubuntu 18.04. Entretanto é possível encontrar guias de instalação em plataformas no link do projeto.

 

1 – Instale as bibliotecas:

2 – Instale o pacote da língua portuguesa (de Portugal) do Tesseract:

3 – Adicione o Tesseract.js ao projeto:

O Tesseract por si só suporta diversos idiomas (100 idiomas para ser mais preciso), por padrão a biblioteca já possui o dicionário dessas linguagens separadas em módulos. Caso queira adicionar suporte a mais idiomas basta olhar na documentação a sigla da linguagem e instalar o pacote no link: Tesseract Linguagens.

 

Criando o servidor

1- Crie na raiz do projeto um arquivo chamado server.js com o seguinte conteúdo:

2 – Inicie a aplicação:

3 – No postman tente acessar a url http://localhost:3000/upload com um método POST, você deverá receber uma resposta contendo: “Escola de Javascript”.

 

Upload de arquivos

Iremos adicionar ao nosso endpoint a habilidade de aceitar upload de imagens, para isto usaremos a biblioteca multer.

 

1 – Adicione a biblioteca multer ao projeto:

2 – Crie uma pasta chamada config e a pasta images.

  • config – será utilizada para guardar configurações de bibliotecas extras da nossa api.
  • images – local onde serão salvas as imagens temporariamente para processamento.

3 – Dentro da pasta config adicione um arquivo chamado storage.js com o seguinte conteúdo:

// diretório do projeto/config/storage.js

Com nosso storage configurado, podemos editar nosso server.js para receber os arquivos.

 

4 – Edite o arquivo server.js para adicionar o multer:

Agora nossa api aceita upload de arquivos 😎!

 

Configurando o Tesseract.js

Até o momento nossa api recebe uma imagem e salva na pasta images, para adicionar o Tesseract.js ao projeto iremos criar uma pequena biblioteca que interage com o tesseract.

 

1 – Crie uma pasta chamada lib:

2 – Na pasta lib crie o arquivo imageHandler.js:

3 – No arquivo criado adicione o seguinte conteúdo:

Com a biblioteca criada, basta alterar o server.js novamente para utilizar a biblioteca no endpoint.

 

4 – Altere o arquivo server.js para a seguinte forma:

 

Testando resultados

Agora que finalizamos a nossa API é hora de testar para verificarmos se ela realmente está extraindo corretamente os textos das imagens enviadas (lembrando que a clareza da imagem faz diferença no resultado):

 

1 – Usaremos a seguinte imagem como teste (caso deseje usar a mesma clique aqui para baixar):

tesseract + react native

1 – Inicie o servidor

2 – Abra o postman com a seguinte url:

3 – Configure o Body da requisição para “form-data” e crie um campo do tipo “File” chamado image (você pode escolher o tipo file colocando o mouse sobre o campo key e escolhen a opção que vai aparecer).

4 – Clique no botão “Escolher arquivos”.

5 – Selecione um arquivo de imagem contendo o texto que deseja extrair.

6 – Clique em “Send” para efetuar a requisição.

7 – Caso tenha usado a imagem exemplo, o resultado deve ser algo parecido com isto:

8 – Parabéns por concluir a parte 1 do tutorial o/

 

Conclusão

Neste artigo aprendemos um pouco sobre o Tesseract.js e OCR com javascript e sobre criação de APIs usando Express, na continuação dele criaremos nosso app mobile com React Native para se conectar a API criada.

Se você gostou deste conteúdo e quer aprender mais sobre visão computacional (ou outro tema no mundo javascript) deixa um comentário ai em baixo, também compartilha esse artigo com seus amigos programadores para incentivar a continuação deste trabalho.

Muito obrigado o/

Computer Engineer from Universidade Estadual do Maranhão - Brazil. Developed and contributed on multiple researches and projects on the fields: cloud computing, WebGIS, robotics, 3d printing, computer graphics, internet of things, user mobility in mobile communications, numerical methods, fuzzy logic, channel mobile radio, software engineering.

9
Deixe um comentário

avatar
5 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
Claudinei PerboniLeonardo ScorzaClaudio RobertoIgor Amorim SilvaRyan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
mack
Visitante
mack

Muito legal!
Aguardando a parte II.

Leonardo Scorza

Obrigado pelo comentário, estamos trabalhando nela 😀

Anderson
Visitante
Anderson

Fiz o exemplo, porém apesar do status code 200, ele retornou :

{
“killed”: false,
“code”: 1,
“signal”: null,
“cmd”: “tesseract images\\image_1560859252050 stdout -l por –oem 1 –psm 3”
}

Leonardo Scorza

E aí Anderson, beleza? Você está usando qual sistema operacional?

Igor Amorim Silva
Visitante
Igor Amorim Silva

Olá Anderson. Você usa o que? Linux ou Windows?
Caso use windows, configurou o tesseract no path do windows? Um erro provável está no caminho “images\\image_1560859252050”. Normalmente, as pastas Documentos, Imagens, Videos, etc no windows geram problemas de path. É necessário passar todo o path da imagen caso contrário o cmd quando rodar o tesseract não a encontrará.

Exemplo:
Ao invés de passar “images\\image_1560859252050” seria “C:\\Users\\\\…resto do path da imagem”

Ryan
Visitante
Ryan

Olá, muito bom o tutorial, mas fui testar e não retornou o texto

Retorno:
{
“killed”: false,
“code”: 1,
“signal”: null,
“cmd”: “tesseract images\\image_1560862339769 stdout -l por –oem 1 –psm 3”
}

Alguma dica do que pode ser?
Estou usando Windows – testei o tesseract no cmd e deu tudo certo.

Claudio Roberto
Visitante
Claudio Roberto

Muito bom! Fiz no macbook e funcionou certinho, claro tive que configurar algumas coisa pra poder rodar. Aguardando a segunda parte

Leonardo Scorza

Obrigado por comentar aqui o/

Claudinei Perboni
Visitante
Claudinei Perboni

Bacana o tutorial. Difícil não deixar um “Parabéns bem top” como sempre