Skip to content

Instantly share code, notes, and snippets.

@Makeshift
Created January 4, 2016 14:57
Show Gist options
  • Save Makeshift/0cf5b3c5777dbb2302b4 to your computer and use it in GitHub Desktop.
Save Makeshift/0cf5b3c5777dbb2302b4 to your computer and use it in GitHub Desktop.
Cordova OCR using MS Project Oxford Clusterfuck Base64 to Blob and Formdata
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment