为什么ocrad.js无法识别简单的图像

Question

我正在玩Ocrad.js，我得到了一些奇怪的结果，它似乎比清晰的图像更能识别拥挤的图像。如何确保正确读取图像2？图像的大小是否重要？任何帮助表示赞赏！

所有图片都保存为png

image1的：

结果：“±_：,,, 。 _ _ _ | | '°' '_7_b0_ _ _omml_mPn ta_get'____'_ :, '_ ' o，i''|'¡'，,,',,',, _ _ na_ional commi_ _ |'mpc__ .. _ llnan¿lál em ___'_"___'__' _ _ developlng L _._ _ .- , _ _ U_' _'e _ _ '“ ''“，n_ _M，_R_g' _oxx_7 __ ,,, _ ____ _____”____ Om __D_ __°_ _ _ | “

IMAGE2：

结果：“”

代码：

<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>