Conversion image en texte avec React et Tesseract.js (OCR) —

À propos de l'auteur

Ayobami Ogundiran est un ingénieur logiciel de Lagos, au Nigeria. Il aime aider ceux qui ont du mal à comprendre et à construire des projets avec JavaScript.

En savoir plus sur

Ayobami
↬

Devez-vous traiter les données manuellement car elles sont transmises via des images ou des documents numérisés ? Une conversion image-texte permet d'extraire du texte à partir d'images pour automatiser le traitement de textes sur des images, des vidéos et des documents numérisés. Dans cet article, nous examinons comment convertir une image en texte avec React et Tesseract.js (OCR), prétraiter les images et gérer les limitations de Tesseract (OCR).

Les données sont l'épine dorsale de chaque application logicielle, car le but principal d'une application est de résoudre des problèmes humains. Pour résoudre les problèmes humains, il est nécessaire de disposer d'informations à leur sujet.

Ces informations sont représentées sous forme de données, notamment par le biais de calculs. Sur le Web, les données sont principalement collectées sous forme de textes, d'images, de vidéos et bien d'autres. Parfois, les images contiennent des textes essentiels destinés à être traités pour atteindre un certain objectif. Ces images étaient principalement traitées manuellement car il n'y avait aucun moyen de les traiter par programmation.

L'impossibilité d'extraire du texte à partir d'images était une limitation du traitement des données que j'ai rencontrée de première main dans ma dernière entreprise. Nous devions traiter les cartes-cadeaux numérisées et nous devions le faire manuellement car nous ne pouvions pas extraire le texte des images.

Il y avait un département appelé « Opérations » au sein de l'entreprise qui était responsable de la confirmation manuelle. cartes-cadeaux et créditer les comptes des utilisateurs. Bien que nous disposions d'un site Web via lequel les utilisateurs se connectaient avec nous, le traitement des cartes-cadeaux était effectué manuellement dans les coulisses.

À l'époque, notre site Web était principalement construit avec PHP (Laravel) pour le backend et JavaScript (jQuery et Vue) pour le frontend. Notre pile technique était assez bonne pour fonctionner avec Tesseract.js à condition que le problème soit considéré comme important par la direction.

J'étais prêt à résoudre le problème mais il n'était pas nécessaire de résoudre le problème à en juger par l'entreprise ou le point de vue de la direction. de vue. Après avoir quitté l'entreprise, J'ai décidé de faire quelques recherches et d'essayer de trouver des solutions possibles. Finalement, j'ai découvert l'OCR.

Qu'est-ce que l'OCR ?

L'OCR signifie « Reconnaissance optique de caractères » ou « Lecteur optique de caractères ». Il est utilisé pour extraire des textes à partir d'images. , Newton MesssagePad et Tesseract sont les principales inventions qui amènent la reconnaissance de caractères à un autre niveau d'utilité.

Alors, pourquoi utiliser l'OCR ? Eh bien, la reconnaissance optique de caractères résout beaucoup de problèmes, dont l'un m'a poussé à écrire cet article. J'ai réalisé que la possibilité d'extraire des textes à partir d'une image offre de nombreuses possibilités telles que :

• Réglementation
  Chaque organisation doit réglementer les activités des utilisateurs pour certaines raisons. Le règlement peut être utilisé pour protéger les droits des utilisateurs et les protéger des menaces ou des escroqueries.
  L'extraction de textes à partir d'une image permet à une organisation de traiter des informations textuelles sur une image à des fins de réglementation, en particulier lorsque les images sont fournies par certains des utilisateurs. .
  Par exemple, une régulation similaire à Facebook du nombre de textes sur les images utilisées pour les publicités peut être réalisée avec l'OCR. En outre, le masquage de contenu sensible sur Twitter est également rendu possible par l'OCR.
• Recherche
  La recherche est l'une des activités les plus courantes, en particulier sur Internet. Les algorithmes de recherche sont principalement basés sur la manipulation de textes. Avec la reconnaissance optique de caractères, il est possible de reconnaître les caractères sur les images et de les utiliser pour fournir des résultats d'images pertinents aux utilisateurs. En bref, les images et les vidéos sont désormais consultables à l'aide de l'OCR.
• Accessibilité
  Avoir des textes sur les images a toujours été un défi pour l'accessibilité et il est de règle d'avoir peu de textes sur une image. Avec l'OCR, les lecteurs d'écran peuvent avoir accès aux textes sur les images pour fournir une certaine expérience nécessaire à ses utilisateurs.
• Automatisation du traitement des données
  Le traitement des données est principalement automatisé pour l'échelle. Avoir des textes sur les images est une limitation au traitement des données car les textes ne peuvent être traités que manuellement. La reconnaissance optique de caractères (OCR) permet ainsi d'extraire des textes sur des images par programmation, assurant ainsi l'automatisation du traitement des données surtout lorsqu'il s'agit de traiter des textes sur des images.
• Numérisation des documents imprimés
  Tout passe au numérique et il reste encore beaucoup de documents à numériser. Les chèques, certificats et autres documents physiques peuvent désormais être numérisés grâce à la reconnaissance optique de caractères.

Découvrir toutes les utilisations ci-dessus a approfondi mes intérêts, j'ai donc décidé d'aller plus loin en posant une question :

« Comment puis-je J'utilise l'OCR sur le Web, en particulier dans une application React ?"

Cette question m'a conduit à Tesseract.js.

Qu'est-ce que Tesseract.js ?

[Tesseract.js est un Bibliothèque JavaScript qui compile l'original Tesseract de C vers JavaScript WebAssembly, rendant ainsi l'OCR accessible dans le navigateur. Le moteur Tesseract.js a été écrit à l'origine dans ASM.js et il a ensuite été porté sur WebAssembly, mais ASM.js sert toujours de sauvegarde dans certains cas lorsque WebAssembly n'est pas pris en charge.

Comme indiqué sur le site Web de Tesseract.js, il prend en charge plus de 100 languesl'orientation automatique du texte et la détection de script, une interface simple pour lire les paragraphes, les mots et les cadres de délimitation des caractères.

Tesseract est un moteur de reconnaissance optique de caractères pour divers systèmes d'exploitation. C'est un logiciel libre, publié sous la licence Apache. Hewlett-Packard a développé Tesseract en tant que logiciel propriétaire dans les années 1980. Il est sorti en open source en 2005 et son développement est sponsorisé par Google depuis 2006.

La dernière version, la version 4, de Tesseract a été publiée en octobre 2018 et contient un nouveau moteur OCR qui utilise un neuronal. système de réseau basé sur Long Short-Term Memory (LSTM) et il est destiné à produire des résultats plus précis.

Comprendre les API Tesseract

Pour vraiment comprendre comment fonctionne Tesseract, nous devons décomposer certaines de ses API et leurs composants. Selon la documentation de Tesseract.js, il existe deux manières de l'utiliser. Vous trouverez ci-dessous la première approche et sa décomposition :

Tesseract.recognize(
  image, langue,
  {
    logger : m => console.log(m)
  }
)
.catch (err => {
  console.error(err);
})
.then(résultat => {
 console.log(résultat);
})
}

La méthode recognize prend image comme premier argument, language (qui peut être multiple) comme deuxième argument et { logger: m => console.log(me) } comme dernier argument. Les formats d'image pris en charge par Tesseract sont jpg, png, bmp et pbm qui ne peuvent être fournis qu'en tant qu'éléments (img, vidéo ou canevas), objet fichier (), objet blob, chemin ou URL vers une image et une image encodée en base64 . (Lire ici pour plus d'informations sur tous les formats d'image que Tesseract peut gérer.)

La langue est fournie sous forme de chaîne telle que eng. Le signe + pourrait être utilisé pour concaténer plusieurs langues comme dans eng+chi_tra. L'argument langue est utilisé pour déterminer les données de langue apprises à utiliser dans le traitement des images.

Remarque : Vous trouverez toutes les langues disponibles et leurs codes sur ici .

{ logger: m => console.log(m) } est très utile pour obtenir des informations sur la progression d'une image en cours de traitement. La propriété logger prend une fonction qui sera appelée plusieurs fois pendant que Tesseract traite une image. Le paramètre de la fonction logger doit être un objet avec workerIdjobIdstatus et progress comme propriétés :

{ workerId : 'worker-200030', jobId : 'job-734747', status : 'recognizing text', progress : '0.9' }

progress est un nombre compris entre 0 et 1, et il est en pourcentage pour montrer la progression d'un processus de reconnaissance d'image.

Tesseract génère automatiquement l'objet en tant que paramètre de la fonction logger mais il peut aussi être fourni manuellement. Lorsqu'un processus de reconnaissance est en cours, les propriétés de l'objet logger sont mises à jour à chaque appel de la fonction. Ainsi, il peut être utilisé pour afficher une barre de progression de la conversion, modifier une partie d'une application ou pour obtenir le résultat souhaité.

Le résultat dans le code ci-dessus est le résultat de la reconnaissance d'image. traiter. Chacune des propriétés de result a la propriété bbox comme coordonnées x/y de leur cadre englobant.

Voici les propriétés de l'objet resultleurs significations ou utilisations :

{
  texte : "Je suis codingnninja du Nigeria..."
  hocr : "<div class='ocr_page' id= ..."
  tsv: "1 1 0 0 0 0 0 0 1486 ..."
  case : nulle
  unlv : nul
  osd : nul
  confiance : 90
  blocs : [{...}]
  psm : "SINGLE_BLOCK"
  OEM: "DEFAUT"
  version : "4.0.0-825-g887c"
  paragraphes : [{...}]
  lignes : (5) [{...}, ...]
  mots : (47) [{...}, {...}, ...]
  symboles : (240) [{...}, {...}, ...]
}

• text : tout le texte reconnu sous forme de chaîne.
• lines : un tableau de chaque ligne de texte reconnue par ligne.
• words : un tableau de chaque mot reconnu .
• symbols : un tableau de chacun des caractères reconnus.
• paragraphs : un tableau de chaque paragraphe reconnu. Nous allons discuter de la « confiance » plus tard dans cet article.

Tesseract peut également être utilisé de manière plus impérative, comme dans :

import { createWorker } from 'tesseract.js' ;

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

  (async () => {
  attendre worker.load();
  wait worker.loadLanguage('eng');
  wait worker.initialize('eng');
  const { data: { text } } = wait worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
 console.log(texte);
 attendre worker.terminate();
})();

Cette approche est liée à la première approche mais avec des implémentations différentes.

createWorker(options) crée un processus de travail Web ou un processus enfant de nœud qui crée un travail Tesseract. Le travailleur aide à configurer le moteur OCR Tesseract. La méthode load() charge les scripts principaux de Tesseract, loadLanguage() charge toute langue qui lui est fournie sous forme de chaîne, initialize() s'assure que Tesseract est entièrement prêt à l'emploi, puis la méthode de reconnaissance est utilisée pour traiter l'image fournie. La méthode terminate() arrête le travailleur et nettoie tout.

Remarque : Veuillez consulter la Documentation des API Tesseract pour plus d'informations.

Maintenant, nous devons créer quelque chose pour vraiment voir à quel point Tesseract.js est efficace.

Qu'allons-nous construire?

Nous allons créer un extracteur de code PIN de carte-cadeau, car l'extraction du code PIN d'une carte-cadeau était le problème qui a conduit à cette aventure d'écriture en premier lieu.

Nous allons créer une application simple qui extrait le code PIN d'une carte-cadeau numérisée. Alors que je me suis lancé dans la création d'un simple extracteur de broches pour cartes-cadeaux, je vais vous expliquer certains des défis auxquels j'ai été confronté tout au long de la ligne, les solutions que j'ai fournies et ma conclusion basée sur mon expérience.

Vous trouverez ci-dessous l'image que nous sommes. va utiliser pour les tests car il a des propriétés réalistes qui sont possibles dans le monde réel.

Nous extrairons AQUX-QWMB6L-R6JAU de la carte. Alors, commençons.

Installation de React et Tesseract

Il y a une question à laquelle il faut répondre avant d'installer React et Tesseract.js et la question est, pourquoi utiliser Réagir avec Tesseract ? En pratique, nous pouvons utiliser Tesseract avec Vanilla JavaScript, toutes les bibliothèques ou frameworks JavaScript tels que React, Vue et Angular.

L'utilisation de React dans ce cas est une préférence personnelle. Au départ, je voulais utiliser Vue mais j'ai décidé d'opter pour React car je connais mieux React que Vue.

Maintenant, continuons avec les installations.

Pour installer React avec create-react-app, vous avez pour exécuter le code ci-dessous :

npx create-react-app image-to-text
CD image en texte
fil ajouter Tesseract.js

ou

 npm installe tesseract.js

J'ai décidé d'utiliser le fil pour installer Tesseract.js car je n'ai pas pu installer Tesseract avec npm, mais le fil a fait le travail sans stress. Vous pouvez utiliser npm mais je recommande d'installer Tesseract avec du fil à en juger par mon expérience.

Démarrons maintenant notre serveur de développement en exécutant le code ci-dessous :

yarn start

ou

npm start

Après avoir exécuté le démarrage de fil ou de démarrage npm, votre navigateur par défaut devrait ouvrir une page Web qui ressemble à ci-dessous : ( Grand aperçu)

Vous pouvez également accéder à localhost:3000 dans le navigateur à condition que la page ne soit pas lancée automatiquement.

Après avoir installé React et Tesseract.js, que faire ensuite ?

Configurer un formulaire de téléchargement

Dans ce cas, nous allons ajuster la page d'accueil (App.js) que nous venons de visualiser dans le navigateur pour contenir le formulaire dont nous avons besoin :

import { useState, useRef } from 'react';
importer Tesseract à partir de 'tesseract.js' ;
importer './App.css';

fonction App() {
  const [imagePath, setImagePath] = useState("");
  const [text, setText] = useState("");
 
  const handleChange = (événement) => {
    setImage(URL.createObjectURL(event.target.files[0]));
  }

  revenir (
    

      

        
Image réelle téléchargée
        
        
          
Texte extrait
        

          
 {text} 
        
        
      
    
  );
}

exporter l'application par défaut

La partie du code ci-dessus qui nécessite notre attention à ce stade est la fonction handleChange.

const handleChange = (event) => {
    setImage(URL.createObjectURL(event.target.files[0]));
  }

Dans la fonction, URL.createObjectURL prend un fichier sélectionné via event.target.files[0] et crée une URL de référence qui peut être utilisée avec des balises HTML telles que img, audio et vidéo. Nous avons utilisé setImagePath pour ajouter l'URL à l'état. Désormais, l'URL est désormais accessible avec imagePath.

Nous avons défini l'attribut src de l'image sur {imagePath} pour la prévisualiser dans le navigateur avant de la traiter.

Conversion des images sélectionnées en textes

Comme nous avons saisi le chemin de l'image sélectionnée , nous pouvons transmettre le chemin de l'image à Tesseract.js pour en extraire des textes.

importer { useState} depuis 'react' ;
importer Tesseract à partir de 'tesseract.js' ;
importer './App.css';
 
fonction App() {
  const [imagePath, setImagePath] = useState("");
  const [text, setText] = useState("");
 
  const handleChange = (événement) => {
    setImagePath(URL.createObjectURL(event.target.files[0]));
  }
 
  const handleClick = () => {
  
    Tesseract.recognize(
      imagePath,'fra',
      {
        logger : m => console.log(m)
      }
    )
    .catch (err => {
      console.error(err);
    })
    .then(résultat => {
      // Obtenir le score de confiance
      laisser confiance = résultat.confiance
     
      let text = result.text
      setText(texte);
  
    })
  }
 
  revenir (
    

      

        
Chemin d'image réel téléchargé
        
        
          
Texte extrait
        

          
 {text} 
        
        
         convertir en texte
      
    
  );
}
 
exporter l'application par défaut

Nous ajoutons la fonction « handleClick » à « App.js et il contient l'API Tesseract.js qui prend le chemin de l'image sélectionnée. Tesseract.js prend "imagePath", "langue", "un objet de paramètre".

Le bouton ci-dessous est ajouté au formulaire pour appeler "handClick" qui déclenche la conversion image-texte chaque fois que vous cliquez sur le bouton.[19659106]convertir en texte

Lorsque le traitement est réussi, nous accédons à la fois à la « confiance » et au « texte » du résultat. Ensuite, nous ajoutons "text" à l'état avec "setText(text)".

En ajoutant à

{text}

nous affichons le texte extrait.

Il est évident que "text" est extrait de l'image, mais qu'est-ce que la confiance ?

La confiance montre à quel point la conversion est précise. Le niveau de confiance est compris entre 1 et 100. 1 représente le pire tandis que 100 représente le meilleur en termes de précision. Il peut également être utilisé pour déterminer si un texte extrait doit être accepté comme exact ou non.

La question est alors de savoir quels facteurs peuvent affecter le score de confiance ou l'exactitude de l'ensemble de la conversion ? Il est principalement affecté par trois facteurs principaux : la qualité et la nature du document utilisé, la qualité de l'analyse créée à partir du document et les capacités de traitement du moteur Tesseract.

Maintenant, ajoutons le code ci-dessous à « App. css" pour styliser un peu l'application.

.App {
  text-align : centre ;
}
 
.App-image {
  largeur : 60vmin ;
  événements de pointeur : aucun ;
}
 
.App-main {
  couleur de fond : #282c34 ;
  hauteur minimale : 100 vh ;
  affichage : flexible ;
  flex-direction : colonne ;
  align-items: center;
  justifier-contenu : centre ;
  taille de la police : calc(7px + 2vmin);
  Couleur blanche;
}
 
.zone de texte {
  arrière-plan : #fff ;
  couleur : #333 ;
  rayon de bordure : 5px ;
  text-align : centre ;
}

Voici le résultat de mon premier test :

Résultat dans Firefox

Le niveau de confiance du résultat ci-dessus est de 64. Il convient de noter que l'image de la carte-cadeau est de couleur sombre et cela affecte définitivement le résultat que nous obtenons.

Si vous regardez de plus près l'image ci-dessus, vous verra que la broche de la carte est presque exacte dans le texte extrait. Ce n'est pas exact car la carte-cadeau n'est pas vraiment claire.

Oh, attendez ! À quoi cela ressemblera-t-il dans Chrome ?

Résultat dans Chrome

Ah ! Le résultat est encore pire dans Chrome. Mais pourquoi le résultat dans Chrome est-il différent de celui de Mozilla Firefox ? Différents navigateurs gèrent les images et leurs profils de couleurs différemment. Cela signifie qu'une image peut être rendue différemment selon le navigateur. En fournissant des image.data pré-rendus à Tesseract, il est probable que le résultat soit différent dans différents navigateurs, car différents image.data sont fournis à Tesseract en fonction du navigateur utilisé. Le prétraitement d'une image, comme nous le verrons plus loin dans cet article, aidera à obtenir un résultat cohérent.

Nous devons être plus précis afin d'être sûrs d'obtenir ou de donner les bonnes informations. Nous devons donc aller un peu plus loin.

Essayons davantage pour voir si nous pouvons atteindre l'objectif à la fin.

Test de précision

Il y a beaucoup de facteurs qui affectent une image à- conversion de texte avec Tesseract.js. La plupart de ces facteurs tournent autour de la nature de l'image que nous voulons traiter et le reste dépend de la façon dont le moteur Tesseract gère la conversion.

En interne, Tesseract prétraite les images avant la conversion OCR réelle, mais il ne donne pas toujours des résultats précis. .

Comme solution, nous pouvons prétraiter les images pour obtenir des conversions précises. Nous pouvons binariser, inverser, dilater, redresser ou redimensionner une image pour la prétraiter pour Tesseract.js.

Le pré-traitement d'image est beaucoup de travail ou un vaste domaine sur sa propre. Heureusement, P5.js a fourni toutes les techniques de prétraitement d'image que nous souhaitons utiliser. Au lieu de réinventer la roue ou d'utiliser toute la bibliothèque simplement parce que nous voulons en utiliser une infime partie, j'ai copié ceux dont nous avons besoin. Toutes les techniques de prétraitement des images sont incluses dans preprocess.js.

Qu'est-ce que la binarisation ?

La binarisation est la conversion des pixels d'une image en noir ou en blanc. Nous voulons binariser la carte-cadeau précédente pour vérifier si la précision sera meilleure ou non.

Auparavant, nous extrayions certains textes d'une carte-cadeau, mais le code PIN cible n'était pas aussi précis que nous le souhaitions. Il est donc nécessaire de trouver un autre moyen d'obtenir un résultat précis.

Maintenant, nous voulons binariser la carte-cadeauc'est-à-dire que nous voulons convertir ses pixels en noir et blanc afin que nous puissions voir si un meilleur niveau de précision peut être atteint ou non.

Les fonctions ci-dessous seront utilisées pour la binarisation et elles sont incluses dans un fichier séparé appelé preprocess.js.

function preprocessImage(canvas) {
    const ctx = canvas.getContext('2d');
    image const = ctx.getImageData(0,0,canvas.width, canvas.height);
    seuilFiltre(image.data, 0.5);
    image de retour ;
 }
 
 Exporter par défaut preprocessImage

Que fait le code ci-dessus ?

Nous introduisons un canevas pour contenir des données d'image pour appliquer des filtres, pour pré-traiter l'image, avant de la transmettre à Tesseract pour la conversion.

Le premier preprocessImage La fonction se trouve dans preprocess.js et prépare le canevas à l'utilisation en obtenant ses pixels. La fonction thresholdFilter binarise l'image en convertissant ses pixels en noir ou blanc.

Appelons preprocessImage pour voir si le texte extrait du cadeau précédent la carte peut être plus précise.

Au moment où nous mettrons à jour App.js, il devrait maintenant ressembler au code suivant :

import { useState, useRef } from 'react';
importer preprocessImage de './preprocess' ;
importer Tesseract à partir de 'tesseract.js' ;
importer './App.css';
 
fonction App() {
  const [image, setImage] = useState("");
  const [text, setText] = useState("");
  const canvasRef = useRef(null);
  const imageRef = useRef(null);
 
  const handleChange = (événement) => {
    setImage(URL.createObjectURL(event.target.files[0]))
  }
 
  const handleClick = () => {
    
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
 
    ctx.drawImage(imageRef.current, 0, 0);
    ctx.putImageData(preprocessImage(canvas),0,0);
    const dataUrl = canvas.toDataURL("image/jpeg");
  
    Tesseract.recognize(
      dataUrl,'fra',
      {
        logger : m => console.log(m)
      }
    )
    .catch (err => {
      console.error(err);
    })
    .then(résultat => {
      // Obtenir le score de confiance
      laisser confiance = résultat.confiance
      console.log(confiance)
      // Obtenir la sortie complète
      let text = result.text
  
      setText(texte);
    })
  }
 
  revenir (
    

      

        
Image réelle téléchargée
        
        
Toile
        
          
Texte extrait
        

          
 {text} 
        
        
        Convertir en texte
      
    
  );
}
 
exporter l'application par défaut

Tout d'abord, nous devons importer « preprocessImage » de « preprocess.js » avec le code ci-dessous :

import preprocessImage from './preprocess' ;

Ensuite, nous ajoutons une balise canvas au formulaire. Nous définissons l'attribut ref des balises canvas et img sur { canvasRef } et { imageRef } respectivement. Les références sont utilisées pour accéder au canevas et à l'image à partir du composant App. Nous récupérons à la fois le canevas et l'image avec "useRef" comme dans:

const canvasRef = useRef(null);
const imageRef = useRef(null);

Dans cette partie du code, nous fusionnons l'image avec le canevas car nous ne pouvons prétraiter un canevas qu'en JavaScript. Nous la convertissons ensuite en une URL de données avec « jpeg » comme format d'image.

const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
 
ctx.drawImage(imageRef.current, 0, 0);
ctx.putImageData(preprocessImage(canvas),0,0);
const dataUrl = canvas.toDataURL("image/jpeg");

« dataUrl » est transmis à Tesseract en tant qu'image à traiter.

Maintenant, vérifions si le texte extrait sera plus précis.

Test 2

L'image ci-dessus montre le résultat dans Firefox. Il est évident que la partie sombre de l'image a été changée en blanc mais le prétraitement de l'image ne conduit pas à un résultat plus précis. C'est encore pire.

La première conversion n'a que deux caractères incorrects mais celle-ci a quatre caractères incorrects. J'ai même essayé de changer le niveau de seuil mais en vain. Nous n'obtenons pas un meilleur résultat non pas parce que la binarisation est mauvaise, mais parce que la binarisation de l'image ne corrige pas la nature de l'image d'une manière adaptée au moteur Tesseract.

Voyons à quoi cela ressemble également dans Chrome. :

Nous obtenons le même résultat.

Après avoir obtenu un résultat pire en binarisant l'image, il est nécessaire de vérifier d'autres techniques de prétraitement d'image pour voir si nous pouvons résoudre le problème ou non. Nous allons donc essayer la dilatation, l'inversion et le flou ensuite.

Obtenons simplement le code pour chacune des techniques de P5.js tel qu'il est utilisé par cet article. Nous allons ajouter les techniques de traitement d'images à preprocess.js et les utiliser une par une. Il est nécessaire de comprendre chacune des techniques de prétraitement d'image que nous voulons utiliser avant de les utiliser, nous allons donc en discuter d'abord.

Qu'est-ce que la dilatation?

La dilatation ajoute des pixels aux limites des objets dans une image pour le rendre plus large, plus grand ou plus ouvert. La technique de « dilatation » est utilisée pour prétraiter nos images afin d'augmenter la luminosité des objets sur les images. Nous avons besoin d'une fonction pour dilater les images à l'aide de JavaScript, donc l'extrait de code pour dilater une image est ajouté à preprocess.js.

Qu'est-ce que le flou ?

Le flou consiste à lisser les couleurs d'une image en réduire sa netteté. Parfois, les images ont de petits points/patchs. Pour supprimer ces patchs, nous pouvons flouter les images. L'extrait de code pour flouter une image est inclus dans preprocess.js.

Qu'est-ce que l'inversion ?

L'inversion modifie les zones claires d'une image en une couleur sombre et les zones sombres en une couleur claire. Par exemple, si une image a un fond noir et un premier plan blanc, on peut l'inverser pour que son fond soit blanc et son premier plan noir. Nous avons également ajouté l'extrait de code pour inverser une image en preprocess.js.

Après avoir ajouté dilateinvertColors et blurARGB à « preprocess.js », nous pouvons maintenant les utiliser pour prétraiter les images. Pour les utiliser, nous devons mettre à jour la fonction initiale « preprocessImage » dans preprocess.js :

preprocessImage(...) ressemble maintenant à ceci :

fonction preprocessImage (Toile) {
  niveau de const = 0,4 ;
  rayon constant = 1 ;
  const ctx = canvas.getContext('2d');
  image const = ctx.getImageData(0,0,canvas.width, canvas.height);
  blurARGB(image.data, canvas, radius);
  dilater(image.data, canvas);
  invertCouleurs(image.data);
  seuilFiltre(image.données, niveau);
  image de retour ;
 }

Dans preprocessImage ci-dessus, nous appliquons quatre techniques de prétraitement à une image : blurARGB() pour supprimer les points sur l'image, dilate() pour augmenter la luminosité de l'image, invertColors() pour changer la couleur de premier plan et d'arrière-plan de l'image et thresholdFilter() pour convertir l'image en noir et blanc, ce qui convient mieux à la conversion Tesseract .

Le thresholdFilter() prend image.data et level comme paramètres. level est utilisé pour définir à quel point l'image doit être blanche ou noire. Nous avons déterminé le niveau thresholdFilter et le rayon blurRGB par essais et erreurs, car nous ne savons pas à quel point l'image doit être blanche, sombre ou lisse pour que Tesseract produise un excellent résultat.

Test n°3

Voici le nouveau résultat après application de quatre techniques :

L'image ci-dessus représente le résultat que nous obtenons dans Chrome et Firefox.

Oups ! Le résultat est terrible.

Au lieu d'utiliser les quatre techniques, pourquoi n'en utilisons-nous pas deux à la fois ?

Ouais ! Nous pouvons simplement utiliser les techniques invertColors et thresholdFilter pour convertir l'image en noir et blanc, et basculer le premier plan et l'arrière-plan de l'image. Mais comment savons-nous quoi et quelles techniques combiner ? Nous savons quoi combiner en fonction de la nature de l'image que nous voulons prétraiter.

Par exemple, une image numérique doit être convertie en noir. et blanc, et une image avec des taches doit être floue pour supprimer les points/patchs. Ce qui compte vraiment, c'est de comprendre à quoi sert chacune des techniques.

Pour utiliser invertColors et thresholdFilternous devons commenter à la fois blurARGB et dilate dans preprocessImage:

fonction preprocessImage(canvas) {
    const ctx = canvas.getContext('2d');
    image const = ctx.getImageData(0,0,canvas.width, canvas.height);
    // blurARGB(image.data, canvas, 1);
    // dilate (image.data, canvas);
    invertColors(image.data);
    seuilFiltre(image.data, 0.5);
    image de retour ;
}

Test n°4

Maintenant, voici le nouveau résultat :

Le résultat est encore pire que celui sans aucun prétraitement. After adjusting each of the techniques for this particular image and some other images, I have come to the conclusion that images with different nature require different preprocessing techniques.

In short, using Tesseract.js without image preprocessing produced the best outcome for the gift card above. All other experiments with image preprocessing yielded less accurate outcomes.

Issue

Initially, I wanted to extract the PIN from any Amazon gift card but I couldn’t achieve that because there is no point to match an inconsistent PIN to get a consistent result. Although it is possible to process an image to get an accurate PIN, yet such preprocessing will be inconsistent by the time another image with different nature is used.

The Best Outcome Produced

The image below showcases the best outcome produced by the experiments.

Test #5

The texts on the image and the ones extracted are totally the same. The conversion has 100% accuracy. I tried to reproduce the result but I was only able to reproduce it when using images with similar nature.

Observation And Lessons

• Some images that are not preprocessed may give different outcomes in different browsers. This claim is evident in the first test. The outcome in Firefox is different from the one in Chrome. However, preprocessing images helps achieve a consistent outcome in other tests.
• Black color on a white background tends to give manageable results. The image below is an example of an accurate result without any preprocessing. I also was able to get the same level of accuracy by preprocessing the image but it took me a lot of adjustment which was unnecessary.

The conversion is 100% accurate.

• A text with a big font size tends to be more accurate.

• Fonts with curved edges tend to confuse Tesseract. The best result I got was achieved when I used Arial (font).
• OCR is currently not good enough for automating image-to-text conversion, especially when more than 80% level of accuracy is required. However, it can be used to make the manual processing of texts on images less stressful by extracting texts for manual correction.
• OCR is currently not good enough to pass useful information to screen readers for accessibility. Supplying inaccurate information to a screen reader can easily mislead or distract users.
• OCR is very promising as neural networks make it possible to learn and improve. Deep learning will make OCR a game-changer in the near future.
• Making decisions with confidence. A confidence score can be used to make decisions that can greatly impact our applications. The confidence score can be used to determine whether to accept or reject a result. From my experience and experiment, I realized that any confidence score below 90 isn’t really useful. If I only need to extract some pins from a text, I will expect a confidence score between 75 and 100, and anything below 75 will be rejected.

In case I am dealing with texts without the need to extract any part of it, I will definitely accept a confidence score between 90 to 100 but reject any score below that. For example, 90 and above accuracy will be expected if I want to digitize documents such as cheques, a historic draft or whenever an exact copy is necessary. But a score that is between 75 and 90 is acceptable when an exact copy is not important such as getting the PIN from a gift card. In short, a confidence score helps in making decisions that impact our applications.

Conclusion

Given the data processing limitation caused by texts on images and the disadvantages associated with it, Optical Character Recognition (OCR) is a useful technology to embrace. Although OCR has its limitations, it is very promising because of its use of neural networks.

Over time, OCR will overcome most of its limitations with the help of deep learning, but before then, the approaches highlighted in this article can be utilized to deal with text extraction from images, at least, to reduce the hardship and losses associated with manual processing — especially from a business point of view.

It is now your turn to try OCR to extract texts from images. Good luck!

Further Reading

(vf, yk, il)