javascript - 在将图像发送到 Tesseract OCR 之前进行图像预处理

Question

我正在使用cropper.js 裁剪图像的一部分，然后尝试使用Tesseract js 从中提取文本。我的问题是在某些情况下它不能识别简单的文本，示例如下。 样品 1 样品 2

我还使用相同的样本在 Amazon Textract 上进行了一些测试，但仍然遇到相同的问题，所以我的猜测是裁剪的图像有问题。有没有人在OCR之前有预处理图像的经验，这也需要在JS的帮助下发生

标签： javascriptimage-processingcanvasocr

Answer 1

您是否尝试过仅隔离单词？去除边框或任何其他类型的噪音可以提高 OCR 性能。

以下 javascript 代码段仅对字母进行分段。

结果：

片段：

// Canvas and Images 
var canvas1 = document.getElementById("canvas_1"); 
var canvas2 = document.getElementById("canvas_2"); 

// Load Road image 
var imageRoad = new MarvinImage(); 
imageRoad.load("https://i.imgur.com/9cuE5AR.png", imageRoadLoaded); 

// Load Passport image 
var imagePassport = new MarvinImage(); 
imagePassport.load("https://i.imgur.com/cl637On.png", imagePassportLoaded); 

// Find Text regions in the road image 
function imageRoadLoaded(){ 
    var segments = Marvin.findTextRegions(imageRoad, 40, 40, 50, 190); 
    drawSegments(segments, imageRoad); 
    imageRoad.draw(canvas1); 
} 

// Find Text regions in the passport image 
function imagePassportLoaded(){ 
    var segments = Marvin.findTextRegions(imagePassport, 40, 40, 50, 190); 
    drawSegments(segments, imagePassport); 
    imagePassport.draw(canvas2); 
} 

function drawSegments(segments, image){ 
    for(var i in segments){ 
        var seg = segments[i];
    // Skip segments that are too small
        if(seg.height >= 5){ 
            image.drawRect(seg.x1, seg.y1-5, seg.width, seg.height+10, 0xFFFF0000); 
            image.drawRect(seg.x1+1, seg.y1-4, seg.width-2, seg.height+8, 0xFFFF0000); 
        } 
    } 
}

body{font-size:12px;}

by <a href="https://www.marvinj.org">www.marvinj.org</a></br><br/>
<script src="https://www.marvinj.org/releases/marvinj-1.0.js"></script>
<div style="width:500px; margin:auto">
    <canvas id="canvas_1" width="500" height="300"></canvas>
</div>
<div style="width:601px; margin:auto">
  <canvas id="canvas_2" width="601" height="400"></canvas>
</div>