Untitled

<!DOCTYPE html>
<html>

<head>
    <title>Product Ranking</title>
    <script src="JS_Dependencies/jquery.js"></script>
    <script src="JS_Dependencies/ocrad.js"></script>
    <script src="JS_Dependencies/getImageData.js"></script>
    <script>
        function readText(image) {
            var canvas = document.getElementById("canvas");
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            var context = canvas.getContext("2d");

            var parsedText = OCRAD(context);

            var output = document.getElementById("output");
            output.innerHTML = parsedText;
        };

        function start() {
            var input = document.getElementById('ASIN');

            var http = new XMLHttpRequest();
            http.open("GET", "php/download-asin.php?ASIN=" + input.value, true);
            http.onreadystatechange = function() {
                var text = http.responseText;

                if (text.indexOf(".png") != -1) {
                    var image = new Image();
                    image.onload = function() {
                        readText(image);
                    }
                    image.src = "imgs/" + text;
                } else {

                }
            }
            http.send()

        };
    </script>
</head>

<body>
    <p id="output"></p>
    <p>ASIN:
        <input type="text" name="ASIN" id="ASIN" value="B00006JKZN" />
    </p>
    <input type="button" onclick="start()" value="test" />
    <canvas id="canvas">NONONO</canvas>
</body>

</html>