I ran into a case where I wanted to fool around with Cloud Vision API from pure JavaScript. Not node.js, just JavaScript running in a browser. There were no samples, so I figured I’d whip up some. So here is a little primer on how to do this from JavaScript in a browser.
First you have to take care of a few prerequisites:
- Sign up for Google Cloud Platform
- Enable the Cloud Vision API and create a service account for the Cloud Vision API
Once you do this you’re ready to start developing. Make sure you hold on to the API key you created above.
The first thing you need to do is create an upload form. This is pretty basic in HTML5.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cloud Vision Demo</title> https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js http://key.js http://main.js </head> <body> <form id="fileform" action=""> <select name="type" id="type"> <option value="LANDMARK_DETECTION">LANDMARK_DETECTION</option> </select><br /> <input id="fileInput" type="file" name="fileField"><br /><br /> <input type="submit" name="submit" value="Submit"> </form> </body> </html>
Note that I’m using a select box to drive the type of detection I am doing. There are more choices, but I’m sticking with landmark detection for now.
Next you need to convert the image to Base64 encoding to transmit the image data via a REST API. I looked around for how to do this “properly” and the best I came up with was the “easy way” mentioned in this Stack Overflow post – Get Base64 encode file-data from Input Form.
I use readAsDataURL().
function uploadFiles(event) {
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening
//Grab the file and asynchronously convert to base64.
var file = $('#fileInput')[0].files[0];
var reader = new FileReader()
reader.onloadend = processFile
reader.readAsDataURL(file);
}
function processFile(event) {
var encodedFile = event.target.result;
sendFiletoCloudVision(encodedFile)
}
Then I massage the content into the JSON format that the Cloud Vision API expects. Note that I strip out “data:image/jpeg;base64,”. Otherwise Cloud Vision sends you errors. And you don’t want that.
var type = $("#type").val();
// Strip out the file prefix when you convert to json.
var json = '{' +
' "requests": [' +
' { ' +
' "image": {' +
' "content":"' + content.replace("data:image/jpeg;base64,", "") + '"' +
' },' +
' "features": [' +
' {' +
' "type": "' + type + '",' +
' "maxResults": 200' +
' }' +
' ]' +
' }' +
']' +
'}';
And then I send. With the API key. That’s it. Nothing to it really.
$.ajax({
type: 'POST',
url: "https://vision.googleapis.com/v1/images:annotate?key=" + api_key,
dataType: 'json',
data: json,
//Include headers, otherwise you get an odd 400 error.
headers: {
"Content-Type": "application/json",
},
success: function(data, textStatus, jqXHR) {
displayJSON(data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERRORS: ' + textStatus + ' ' + errorThrown);
}
});
If you want to dig deeper into the Cloud Vision API you can
The code for all of this is now shared in the Cloud Vision repo on GitHub.
tpryan.blog 
Hi Terrence, I tried your code from GitHub regarding to “Working with Cloud Vision API from JavaScript”, but I got error message “error Not Found”.
Could you advise what’s wrong, as I did not alter your code from GitHub at all. Thank you very much !
LikeLike
Hello, i have the same issue “error Not Found”.
LikeLike
This does not work. Did you even try it out?
LikeLike
Fantastic! With the guidance of this doc, I succeeded in implementing my OCR. Thanks for sharing!
LikeLike
High five from New Zealand! This is awesome, great stuff Terrence.
Whakawhetai koe na nui 🙂
LikeLike
Please help me! I am also getting a error msg “error Not Found”.
LikeLike