ocrad.js- OCR Javascript Library throwing Uncaught SecurityError on passing HTML5 canvas to OCRAD() API

Question

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

The code given below, downloaded from github page is pe

Answer 1

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

You will either need to:

• 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).

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).

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.

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.