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

【问题标题】：ocrad.js- OCR Javascript Library throwing Uncaught SecurityError on passing HTML5 canvas to OCRAD() APIocrad.js- OCR Javascript 库在将 HTML5 画布传递给 OCRAD() API 时抛出 Uncaught SecurityError
【发布时间】：2014-05-06 08:41:08
【问题描述】：

我是 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: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': 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 合作过的人对此问题有任何评论。

或

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

提前谢谢.... :)

【问题讨论】：

有没有有用的信息请分享一下，或许能帮我解决问题...
您需要从与页面相同的来源（file:// 不包括）或从允许跨域使用的服务器加载图像（如果是，请请求跨域使用）。跨度>
感谢 Epistemex，John S 在stackoverflow.com/questions/20963172/… 中指出了问题。在我的情况下是否可以允许跨域使用？
如果您将相关图像移动到与您的页面相同的来源（域等），它应该可以工作。否则它将取决于外部服务器是否允许。您可以请求使用 CORS，但服务器可能会拒绝它。您可以通过设置im.crossOrigin = '';在设置src属性来请求。
实际上我不希望它在服务器中，而是希望它作为带有网络摄像头的本地 HTML5 应用程序。用例是使用 HTML5 的 Camera API 拍摄照片并将其传递给 OCRAD API。

标签： javascript html5-canvas ocr filereader

【解决方案1】：

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

您将需要：

将图像移至与页面相同的来源（来源 = 域、端口和协议）
如果您无法移动图像，请从其他来源请求使用 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 了解更多详情。

【讨论】：

感谢您的快速回复。您能否详细说明第三种情况使用代理页面加载图像？