Makeshift · January 4, 2016 14:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <meta name="viewport" content="user-scalable=yes, initial-scale=0.75, maximum-scale=2, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https: http:" />
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https:" />
    <meta http-equiv="X-WebKit-CSP" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https: http:" />
 </head>

 <body>
    <div>
        <table border="1" style="width:100%">
            <tr>
                <td id="left">Waiting for Photo</td>
                <td id="right">Waiting for Photo</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        //Camera stuff
        function startCamera() {
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 75,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.CAMERA,
                allowEdit: false,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false,
                correctOrientation: true
            });
        }

        function onSuccess(imageData) {
            var imagetaken = "data:image/jpeg;base64," + imageData;
            console.log(imagetaken);
            setUpPost(imagetaken);
        }

        function onFail(message) {
            console.log(id)
            console.log(message);
        }

        document.addEventListener("deviceready", function() {
            startCamera();
        }, false);
        //File control stuff

        function setUpPost(base64) {
            var byteString;
            if (base64.split(',')[0].indexOf('base64') >= 0)
                byteString = atob(base64.split(',')[1]);
            else
                byteString = unescape(base64.split(',')[1]);

            // separate out the mime component
            var mimeString = base64.split(',')[0].split(':')[1].split(';')[0];

            // write the bytes of the string to a typed array
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }

            var blob = new Blob([ia], {
                type: mimeString
            });
            var fd = new FormData(document.forms[0]);
            fd.append("canvasImage", blob);
            subimg(fd, base64);
        }

        function subimg(fileToUpload, base64) {
            var params = {
                'subscription-key': 'HAHANOPE',
                visualFeatures: "All",
                language: "en",
                detectOrientation: "true"
            };
            document.getElementById("left").innerHTML = "Loading...";
            document.getElementById("right").innerHTML = "Loading...";

            $.ajax({
                    url: 'https://api.projectoxford.ai/vision/v1/ocr?' + $.param(params),
                    type: 'POST',
                    cache: false,
                    processData: false,
                    contentType: false,
                    data: fileToUpload,
                })
                .done(function(data) {
                    console.log(data);
                    var wordlist = "";
                    for (var i = 0; i < Object.keys(data.regions).length; i++) {
                        for (var c = 0; c < Object.keys(data.regions[i].lines).length; c++) {
                            wordlist += "<br>";
                            for (var d = 0; d < Object.keys(data.regions[i].lines[c].words).length; d++) {
                                wordlist += data.regions[i].lines[c].words[d].text + " ";
                            }
                        }
                    }
                    document.getElementById("right").innerHTML = wordlist;
                    document.getElementById("left").innerHTML = "<img src=\"" + base64 + "\" width=\"600px\">";
                })
                .fail(function(data) {
                    alert(JSON.stringify(data));
                    console.log(JSON.stringify(data));
                });
        }
    </script>
    <button type="button" onclick="startCamera()" style="height:200px;width:100%;font-size:500%">Take Picture</button>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>JSSample</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<meta name="viewport" content="user-scalable=yes, initial-scale=0.75, maximum-scale=2, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https: http:" />
	<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https:" />
	<meta http-equiv="X-WebKit-CSP" content="default-src 'self'; script-src 'self' data: 'unsafe-inline' 'unsafe-eval' https:; object-src 'self'; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; media-src 'self'; frame-src 'self'; font-src 'self' data: https:; connect-src 'self' https: http:" />
	</head>

	<body>
	<div>
	<table border="1" style="width:100%">
	<tr>
	<td id="left">Waiting for Photo</td>
	<td id="right">Waiting for Photo</td>
	</tr>
	</table>
	</div>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript">
	//Camera stuff
	function startCamera() {
	navigator.camera.getPicture(onSuccess, onFail, {
	quality: 75,
	destinationType: Camera.DestinationType.DATA_URL,
	sourceType: Camera.PictureSourceType.CAMERA,
	allowEdit: false,
	encodingType: Camera.EncodingType.JPEG,
	popoverOptions: CameraPopoverOptions,
	saveToPhotoAlbum: false,
	correctOrientation: true
	});
	}

	function onSuccess(imageData) {
	var imagetaken = "data:image/jpeg;base64," + imageData;
	console.log(imagetaken);
	setUpPost(imagetaken);
	}

	function onFail(message) {
	console.log(id)
	console.log(message);
	}

	document.addEventListener("deviceready", function() {
	startCamera();
	}, false);
	//File control stuff

	function setUpPost(base64) {
	var byteString;
	if (base64.split(',')[0].indexOf('base64') >= 0)
	byteString = atob(base64.split(',')[1]);
	else
	byteString = unescape(base64.split(',')[1]);

	// separate out the mime component
	var mimeString = base64.split(',')[0].split(':')[1].split(';')[0];

	// write the bytes of the string to a typed array
	var ia = new Uint8Array(byteString.length);
	for (var i = 0; i < byteString.length; i++) {
	ia[i] = byteString.charCodeAt(i);
	}

	var blob = new Blob([ia], {
	type: mimeString
	});
	var fd = new FormData(document.forms[0]);
	fd.append("canvasImage", blob);
	subimg(fd, base64);
	}

	function subimg(fileToUpload, base64) {
	var params = {
	'subscription-key': 'HAHANOPE',
	visualFeatures: "All",
	language: "en",
	detectOrientation: "true"
	};
	document.getElementById("left").innerHTML = "Loading...";
	document.getElementById("right").innerHTML = "Loading...";

	$.ajax({
	url: 'https://api.projectoxford.ai/vision/v1/ocr?' + $.param(params),
	type: 'POST',
	cache: false,
	processData: false,
	contentType: false,
	data: fileToUpload,
	})
	.done(function(data) {
	console.log(data);
	var wordlist = "";
	for (var i = 0; i < Object.keys(data.regions).length; i++) {
	for (var c = 0; c < Object.keys(data.regions[i].lines).length; c++) {
	wordlist += "<br>";
	for (var d = 0; d < Object.keys(data.regions[i].lines[c].words).length; d++) {
	wordlist += data.regions[i].lines[c].words[d].text + " ";
	}
	}
	}
	document.getElementById("right").innerHTML = wordlist;
	document.getElementById("left").innerHTML = "<img src=\"" + base64 + "\" width=\"600px\">";
	})
	.fail(function(data) {
	alert(JSON.stringify(data));
	console.log(JSON.stringify(data));
	});
	}
	</script>
	<button type="button" onclick="startCamera()" style="height:200px;width:100%;font-size:500%">Take Picture</button>
	</body>

	</html>