ocrad.js- OCR Javascript库在将HTML5画布传递给OCRAD（）API时抛出未捕获的SecurityError [英] ocrad.js- OCR Javascript Library throwing Uncaught SecurityError on passing HTML5 canvas to OCRAD() API
问题描述
我是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：在'CanvasRenderingContext2D'上执行'getImageData'失败：画布已被跨源数据污染。
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这里 但它没有帮助我解决这个问题。请回答是否有任何人对此问题有任何评论与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.
或
还有其他方法可以传递我的图像文件（此处<第二个代码示例中的strong> 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.
您需要：
- 将图像移动到同一来源页面（origin =域，端口和协议）
- 如果无法移动图像，请从其他来源请求CORS使用
- 使用用于加载图片的代理页面（请参阅 这里有一个 - 注意：我这样做不知道这个网站所以只用于测试非关键数据）。
- Move image to same origin as the page (origin = domain, port and protocol)
- Request CORS usage from the other origin if you can't move the image
- Use a proxy page to load the image (see one in action here - note: I do not know this site so use only for testing with non-critical data).
请求可以这样做（假设 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.
这篇关于ocrad.js- OCR Javascript库在将HTML5画布传递给OCRAD（）API时抛出未捕获的SecurityError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
