ocrad.js- OCR Javascript Library throwing Uncaught

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

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.

My CODE

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

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.

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.

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.