ocrad.js- OCR Javascript 库在将 HTML5 画布传递给 OCRAD() API 时抛出 Uncaught SecurityError

2022-01-17 00:00:00 ocr javascript html5-canvas filereader

我是 HTML5+JS 的新手，我想使用 开发一个混合应用程序ocrad.js.

I'm a newbie in HTML5+JS, I want to develop an hybrid app using ocrad.js.

下面给出的代码，从 github 页面下载非常适合我(Chrome 32.0.1).

The code given below, downloaded from github page is perfectly working for me(Chrome 32.0.1).

<html>
    <head>
    </head>
    <body>
        <script src="../ocrad.js"></script>
        <script>
            function OCRImage(image){
                var canvas = document.createElement('canvas')
                canvas.width  = image.naturalWidth;
                canvas.height = image.naturalHeight;
                canvas.getContext('2d').drawImage(image, 0, 0)
                return OCRAD(canvas)
            }

            function OCRPath(url, callback){
                var image = new Image()
                image.src = url;
                image.onload = function(){ callback(OCRImage(image)) }
            }

            function OCRFile(file, callback){
                var reader = new FileReader();
                reader.onload = function(){ OCRPath(reader.result, callback); }
                reader.readAsDataURL(file)
            }
        </script>
        <input type="file" onchange="OCRFile(this.files[0], function(text){alert(text)})">
    </body> 
</html>

当我在代码中调用 OCRAD() API 时，它会给出 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D':画布已被跨域数据污染.

When I called OCRAD() API in my code its giving Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data.

我的代码

<html>
<head>
    <script src="../ocrad.js"></script>
<body>
<canvas id="cancan" width="800", height="500">Test image</canvas>
<script type="text/javascript">

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;
</script>
</body> 
</html>

我见过类似的Stackoverflow Q&A here，但它并没有帮助我解决问题.请回答是否有任何与 Ocrad.js 合作过的人对此问题有任何评论.

I have seen similar Stackoverflow Q&A here but it didn't help me to solve the issue. Please answer if any one had any comment on this issue who have worked with Ocrad.js.

或

还有其他方法可以将我的图像文件(此处为第二个代码示例中的 message.png)作为参数传递给第一个代码示例中的 OCRFile() 函数吗?(只是我想将存储在本地文件 URL 中的图像传递给 OCRAD() 调用以返回文本.)

Is there anyother way to pass my image file (here message.png in second code example) as an argument to OCRFile() function in first code example ? (Simply I want to pass an image stored in an local file URL to OCRAD() Call to return text. )

提前谢谢.... :)

Thanks in advance.... :)

推荐答案

这是一个跨域问题，是浏览器中的一种安全机制.

It is a cross-origin issue which is a security mechanism in browsers.

您将需要:

  • 将图片移至与页面相同的来源(来源 = 域、端口和协议)
  • 如果您无法移动图像，请从其他来源请求使用 CORS
  • 使用代理页面加载图片(请参阅此处的实际操作- 注意:我不知道这个网站，所以仅用于测试非关键数据).

可以这样发出请求(假设 im 包含您要 OCR 处理的图像):

A request can be made like this (assuming im contains the image you want to OCR treat):

function imageLoaded(ev) {
    element = document.getElementById("cancan");
    c = element.getContext("2d");
    width = element.width;
    height = element.height;
    c.drawImage(this, 0, 0);  // 'this' = current image loaded
    var data1 = OCRAD(c);
    console.log(data1);
}

var im = new Image();
im.onload = imageLoaded;      // set onload before src
im.crossOrigin = 'anonymous'; // request CORS usage before setting src
im.src = "message.png";

请求是否有效完全取决于可能拒绝请求的服务器(这是大多数情况下的默认行为).

If a request will work is entirely up to the server which may deny the request (which is default behavior in most cases).

在这种情况下，只有移动图像或设置代理页面来加载外部图像才能使用它.请注意，file://或本地文件被视为不同的来源.

In that case only moving the image or setting up a proxy page to load the external image will allow usage of it. Note that file:// or local files are considered different origins.

代理页面本质上是您将图像 url 作为参数传递给的页面.然后，该页面将在服务器端加载图像并将数据传递回您的第一个(请求)页面.通过这种方式，您可以通过您自己的服务器流式传输"图像，从而消除 CORS 限制，但会增加您自己服务器上的流量.一些服务器也可能通过拒绝外部访问(即通过引用或 IP 等)来阻止这种方法

A proxy page is in essence a page you pass the image url to as an argument. The page will then, on server side, load the image and pass the data back to your first (requesting) page. This way you can "stream" the image through your own server removing CORS restrictions but at the expense of increased traffic on your own server. Some server may also block this approach by denying external access (ie. by referrer or IP etc.)

有关详细信息，请参阅 跨源资源共享.

See Cross-Origin Resource Sharing for more details.

相关文章