如何让 Ocrad.js 示例工作 [关闭]答案

【问题标题】：How to get Ocrad.js example to work [closed]如何让 Ocrad.js 示例工作 [关闭]
【发布时间】：2014-01-07 03:01:22
【问题描述】：

我正在制作一个 OCR（光学字符识别）Web 应用程序，我找到了 JavaScript 库 Ocrad.js，这正是我正在寻找的，但我无法让它工作。有人可以帮帮我吗？

这是我的代码：

<!doctype html>
<html>
    <head>
        <script src="ocrad.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(document).ready(function() {
                var image = document.getElementById('image');
                var string = OCRAD(image);
                alert(string);
            });
        </script>
    </head> 
    <body>
        <img src="img.jpg" id="image">
    </body>
</html>

【问题讨论】：

请更具体一些。 “无法正常工作”是什么意思？
我会使用图像的路径来定义“图像”

标签： javascript jquery ocr

【解决方案1】：

您不能只将<img> 元素传递给OCRAD() 函数。

来自Ocrad.js documentation：

此文件公开了一个全局函数 OCRAD，它采用图像作为参数，并将识别的文本作为字符串返回。 [...] image 参数可以是一个画布元素，一个 Context2D 实例，或 ImageData 的实例。

试试这个：

$(document).ready(function() {
    var $img = $('#image');

    var context = document.createElement('canvas').getContext('2d');
    context.drawImage($img[0], 0, 0);

    var imageData = context.getImageData(0, 0, $img.width(), $img.height());

    var string = OCRAD(imageData);
    alert(string);
});

但您可能必须将 width 和 height 属性放在您的 <img> 元素上才能使其正常工作。

如果您尝试将<img> 元素传递给OCRAD() 函数，您将收到以下错误：

未捕获的异常：5264272 - 异常捕获被禁用，这个无法捕获异常。用 -s 编译 DISABLE_EXCEPTION_CATCHING=0 或 DISABLE_EXCEPTION_CATCHING=2 来捕获。

如果您尝试将 jQuery 对象传递给 OCRAD() 函数，您将收到以下错误：

错误：无效参数

注意：由于同源策略，如果图像的 URL 与其所在页面的域不同，则对 context.getImageData() 的调用将引发 SecurityError。

【讨论】：

嗨@John S，这对我没有帮助，你可以用function imageLoaded(ev) { element = document.getElementById("cancan"); c = element.getContext("2d"); im = ev.target; width = element.width; height = element.height; c.drawImage(im, 0, 0); var data1=OCRAD(c); console.log(data1); } im = new Image(); im.src = "message.png"; im.onload = imageLoaded; 检查我的代码，我得到 Uncaught SecurityError: Failed to execute 'getImageData' on CanvasRenderingContext2D: canvas已被跨域数据污染。
@NithinCVpoyyil - 图片的 URL 必须与其所在页面具有相同的域，否则对 context.getImageData() 的调用将引发 SecurityError。
我正面临这个问题。如何修复它。未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。