CODEWITHSUNDEEP
phphtmlocrabbyyabbyy-cloud-ocr
David Vasandani
David Vasandani

Reputation: 1930

ABBYY Cloud OCR

Using the php sample that ABBYY provides http://pastebin.com/SeN8mdya I've been able to convert an image to text. Works like a charm. Now I'm trying to use an web interface to take a picture on a mobile device and send that to the ABBYY ocr service and return the resulting text. My code that takes the picture:

<!doctype html>
<html>
    <head>
        <title>Camera access on mobile web!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            #container {
                margin:0 auto;
                padding:0;
                width:200px;
            }
            div.message {
                background-color:green;
                border-radius:4px;
                color:white;
                display:none;
                padding:5px 0;
                text-align:center;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img src="logo-mobile.png" id="lunchbox-logo" />
            <div class="message"><strong>Thanks for the submission!</strong></div>
            <p>Submit your receipt straight from your web browser!!</p>


            <form method="POST" enctype="multipart/form-data" action="http://cloud.ocrsdk.com/processImage?language=english&exportFormat=txt">
                <input type="file" accept="image/*" name="receipt[data]">
                <input type="button" onClick="submitReceipt();" value="Submit">    
            </form>
        </div>

        <script type="text/javascript">
            function submitReceipt(){
                var token = 'NEVER-COMMIT-TOKENS :)';
                var file = document.getElementsByName('receipt[data]')[0].files[0];

                fd = new FormData();
                fd.append('access_token', token);
                fd.append('receipt[data]', file);

                req = new XMLHttpRequest();
                req.open('POST', 'http://cloud.ocrsdk.com/processImage?language=english&exportFormat=txt');
                req.send(fd);

                document.getElementsByClassName('message')[0].style.display = "block";

            }  
        </script>
    </body>
</html>

Both work independently of each other. I'd like the camera page to submit the picture to ABBYY and wait for the returning result and then display it. All my attempts have broken it. Thanks again.

Upvotes: 0

Views: 702

Answers (1)

user149341
user149341

Reputation:

What you're ending up inadvertently doing here is submitting the filename of the uploaded file, rather than the file content. There are fancy ways to get the content of the file nowadays, but it'll be much simpler to just skip all the fancy AJAX stuff you're doing, remove the onClick handler, and submit the form normally.

Upvotes: 1

Related Questions