我目前正在尝试使用 Face API 来检测用户上传的图像。我正在尝试遵循文档，但论坛已锁定，因此我最好的选择是在这里。代码如下:
<!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>
我在 Chrome 控制台中不断收到“canvas”未定义错误。不太确定我的问题出在哪里。
任何帮助都会非常感谢。
编辑 - 删除的键
最佳答案
因为你没有定义它......
var canvas = document.getElementById('canvas'),
data = canvas.toDataURL('image/jpeg', 1.0);
更改 js 中的顶行以包含此内容，您应该已准备就绪。
此外，当您定义“ Canvas ”时，您应该能够更改
document.getElementById('canvas').getContext('2d')
到
canvas.getContext('2d');
关于javascript - Canvas 的人脸 API 检测问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11123651/