Javascript 为什么ocrad.js不能识别简单的图像

我在玩Ocrad.js时得到了一些奇怪的结果，它似乎比清晰的图像更能识别拥挤的图像。如何确保正确读取图像2？图像的大小重要吗？感谢您的帮助

所有图像均保存为png

图1：

“结果：”<强>强>强>强>强>强>强>强>强>强>强>强>强>强>强>强>强>结果：，<强>强>强>强>强>强>强>强>强>强>难以下以下以下以下以下以下几项结果：：“<强>强>强>你们们，我，我“o，我”的““，，，，，，，，，，，，，，以及以及以及.美国国家和全国全国全国（全国）全国全国全国全国全国委员会委员会（全国）委员会）委员会委员会（中国）的城市委员会（mpc）将将将将将将将将将将其其作为作为作为作为作为其的mpc。将将将将将将将将将将将将将将将将将其其作为作为作为其的mpc。。将将将将将将将将将将将将将将将将将将将将将将将将将其作为作为作为作为作为其的mpc从从从从从从从从(小标题),"小标题","小标题","小标题","小标题","小标题","小标题,"小标题","小标题,"小标题,"小标题,"_____“uuuuuuuuuuuuum_uuuuud_uuuuuuuuuuuuuuuuuuuuuuuuuuuu124;”

图2：

结果：“”

代码：

#演示>div{
位置：相对位置；
浮动：左；
}
跨度{
显示：内联块；
宽度：600px；
高度：100px；
}
帆布{
边框：1px纯灰；
}








变量画布，上下文，imageWidth=600，
图像高度=300，
imageObj=新图像（）；
测试（'../other/text1.png'，canvas1'，text1'，function（）{
测试（'../other/text2.png'，canvas2'，text2'，function（）{
测试（'../other/text3.png'，canvas3'，text3'，function（）{
测试（'../other/text4.png'，canvas4'，text4'，function（）{}）；
});
});
});
功能测试（源代码、id、txt、func）{
canvas=document.getElementById（id）；
context=canvas.getContext（'2d'）；
imageObj.src=源；
imageObj.onload=function（）{drawImage（imageObj，txt，func）；}
}
函数drawImage（imageObj、txt、func）{
drawImage（imageObj，0,0）；
var c=context.getImageData（0,060300），
响应=OCRAD（c）；
document.getElementById（txt）.textContent=响应；
func（）；
}
函数灰度（）{
var imageData=context.getImageData（0，0，imageWidth，imageHeight）；
var数据=imageData.data；
对于（变量i=0；i

<meta charset=UTF-8>
<script src="http://antimatter15.com/ocrad.js/ocrad.js"></script>
<style>
    #demo > div {
        position: relative;
        float: left;
    }
    span {
        display: inline-block;
        width: 600px;
        height: 100px;
    }
    canvas, span {
        border: 1px solid grey;
    }
</style>
<div id="demo">
    <div>
        <canvas id='canvas1' class="" width="600" height="300"></canvas>
        <br>
        <span id="text1"></span>
    </div>
    <div>
        <canvas id='canvas2' class="" width="600" height="300"></canvas>
        <br>
        <span id="text2"></span>
    </div>
    <div>
        <canvas id='canvas3' class="" width="600" height="300"></canvas>
        <br>
        <span id="text3"></span>
    </div>
    <div>
        <canvas id='canvas4' class="" width="600" height="300"></canvas>
        <br>
        <span id="text4"></span>
    </div>
</div>
<div>
<script>
var canvas, context, imageWidth = 600,
    imageHeight= 300,
    imageObj = new Image();

test('../other/text1.png', 'canvas1', 'text1', function() {
    test('../other/text2.png', 'canvas2', 'text2', function() {
        test('../other/text3.png', 'canvas3', 'text3', function() {
            test('../other/text4.png', 'canvas4', 'text4', function(){});
        });
    });
});

function test(source, id, txt, func) {
    canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    imageObj.src = source;
    imageObj.onload = function() { drawImage(imageObj, txt, func); }
}
function drawImage(imageObj, txt, func) {
    context.drawImage(imageObj, 0, 0);
    var c = context.getImageData(0, 0, 600, 300),
        response = OCRAD(c);
    document.getElementById(txt).textContent = response;
    func();
}
function grayscale(){
    var imageData = context.getImageData(0, 0, imageWidth, imageHeight);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
        // red
        data[i] = brightness;
        // green
        data[i + 1] = brightness;
        // blue
        data[i + 2] = brightness;
    }
    // overwrite original image
    context.putImageData(imageData, 0, 0);
}
</script>