javascript - ocrad.js-将HTML5 Canvas 传递给OCRAD()API时，OCR Javascript库引发Uncaught SecurityError

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

从github页面下载的code given below非常适合我（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：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨域数据污染。

我的密码

<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的人是否对此问题有任何评论。

要么

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

提前致谢.... ：）

最佳答案

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

您要么需要：

将图像移动到与页面相同的来源（来源=域，端口和协议）
如果您无法移动图片，请从其他来源请求使用CORS
使用代理页面加载图像（请参见one in action here-注意：我不知道该站点，因此仅用于测试非关键数据）。

可以这样发出请求（假设im包含您要OCR处理的图像）：

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

如果请求能够正常工作完全取决于服务器，服务器可能会拒绝该请求（在大多数情况下，这是默认行为）。

在那种情况下，仅移动图像或设置代理页面以加载外部图像将允许其使用。请注意，file：//或本地文件被认为是不同的来源。

代理页面本质上是您将图像URL作为参数传递给的页面。然后，该页面将在服务器端加载图像，并将数据传递回您的第一个（请求）页面。这样，您可以通过自己的服务器“流式传输”映像，从而消除了CORS限制，但以增加自己服务器上的流量为代价。某些服务器还可以通过拒绝外部访问（即通过引荐来源网址或IP等）来阻止此方法

有关更多详细信息，请参见Cross-Origin Resource Sharing。