What I am currently trying to do is use the Face API to detect an image that a user has uploaded. I am trying to follow the documentation and the forums are locked so my best bet would be here. Code is below:
<!DOCTYPE html>
<html>
<head>
<title>FaceDetect</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://api.face.com/lib/api_client.js"></script>
<!--<script type="text/javascript" src="http://api.face.com/lib/tagger.js"></script>-->
<style type="text/css">
.f_attribution {display:none;}
</style>
<script type="text/javascript">
var data = canvas.toDataURL('image/jpeg', 1.0);
newblob = dataURItoBlob(data);
var formdata = new FormData();
formdata.append("<-- Insert Key -->", faceKey);
formdata.append("<-- Insert Key -->", faceSecret);
formdata.append("filename","temp.jpg");
formdata.append("file",newblob);
$.ajax({
url: 'http://api.face.com/faces/detect.json',
data: formdata,
cache: false,
contentType: false,
processData: false,
dataType:"json",
type: 'POST',
success: function (data) {
handleResult(data.photos[0]);
}
});
//credit http://stackoverflow.com/a/8782422/52160
function dataURItoBlob(dataURI, callback) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString;
if (dataURI.split(",")[0].indexOf("base64") >= 0) {
byteString = atob(dataURI.split(",")[1]);
} else {
byteString = unescape(dataURI.split(",")[1]);
}
// separate out the mime component
var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
</script>
</head>
<body>
<h1>MetroClick FaceDetect</h1>
<!--<img id="simage" src="http://images.wikia.com/powerrangers/images/f/fe/ActorJohnCho_John_Shea_55027822.jpg"/>-->
<canvas id="canvas" width="500" height="500"></canvas>
<input type='file' name='img' size='65' id='uploadimage' />
<script type="text/javascript">
//<![CDATA[
function draw(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", draw, false)
//]]>
//FaceClientAPI.init('8b3b9170dc5b8a8a4012b06b492449e5');
//FaceTagger.load("#simage", { demo_mode:true, click_add_tag: false, resizable: true, facebook: false, fade: true, tags_list: false, add_tag_button: true });
</script>
</body>
</html>
I keep receiving a “canvas” is not defined error in the Chrome console. Not really sure where I am having the issue.
Any help would be great thanks.
Edit – Removed keys
because you don’t define it…
change the top line in your js to include this and you should be all set.
Also when you do defined ‘canvas’ you should be able to change
to