使用画布检测脸部API检测问题

我目前试图做的是使用Face API检测用户上传的图像。我正在尝试关注文档，论坛已锁定，所以我最好的选择就是在这里。代码如下：使用画布检测脸部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”未定义的错误。不知道我在哪里遇到问题。

任何帮助将非常感谢。

编辑 - 删除键

来源

2012-06-20 shayward

，因为你不把它定义...

var canvas = document.getElementById('canvas'), 
    data = canvas.toDataURL('image/jpeg', 1.0);

改变你的js顶线，其中包括这一点，你应该准备就绪。

而且当你定义的 '画布' 你应该能够改变

document.getElementById('canvas').getContext('2d')

到

canvas.getContext('2d');

来源

2012-06-20 16:11:06 rlemon

：facepalms :,哇谢谢。我头痛地想弄清楚这个API的其余部分，我忘记了这一点。谢谢！ - 等待3分钟，我可以在这里接受你的答案。 – shayward

嗨我得到了同样的错误，当我尝试了图像预调整大小的代码http://stackoverflow.com/a/10334170/823386。错误消失了！但是，代码没有工作。任何指针？ – sbose

错误是一个未定义的值 - 在这个答案你交叉链接有很多未定义的值，它似乎是一个不完整的代码片段。 – rlemon

使用画布检测脸部API检测问题

回答

相关问题