2017-03-02 7 views
1

Ich brauche Hilfe mit meinem Skript. Ich versuche, einen Code zu generieren, die den Text in einem Bild zeigt, und ich fand die Bibliothek Tessereact.js, aber wenn die Verwendung mir diesen Fehler zeigt (screenshot):Fehler mit Tesseract js

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 

Hier ist mein Code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script> 
 
</head> 
 
<body> 
 
    <img src="img/ley.jpg"/> 
 
    <script> 
 
     var img = document.getElementsByTagName("img")[0]; 
 
     Tesseract.recognize(img, function(result) { 
 
      console.log(result); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

ich brauche Hilfe bitte, ich bin sehr daran interessiert, dieses Projekt bei der Fertigstellung ...

Danke!

+0

hallo, habe meine Antwort Ihre Frage beantworten? – Quannt

Antwort

0

Ihr Bild img/ley.jpg von rechts würde in eine Leinwand von tessereact.js zur weiteren Verarbeitung geladen werden. Aufgrund der CORS-Richtlinie ist die Arbeitsfläche jedoch "verdorben"().

Sie können dieses Problem umgehen, indem Sie die crossOrigin des Bildelements zu Anonymous Einstellung vorgesehen, dass der Server, der das Bild hostet Access-Control-Allow-Origin "*" im Header zurückgibt. Hier

ist der Arbeitscode

var img = new Image; 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
var src = "https://i.imgur.com/FkLGnxH.png"; 

img.crossOrigin = "Anonymous"; 

img.onload = function() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 

    Tesseract.recognize(ctx) 
    .then(function(result) { 
     document.getElementById("result") 
     .innerText = result.text; 
    }); 
} 
img.src = src; 
<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script> 
</head> 

<body> 
    <span id="result"></span> 
</body> 

</html> 

https://jsbin.com/comulejaqa/edit?html,js,output