Javascript 使用画布检测Face API问题_Javascript_Canvas

Javascript 使用画布检测Face API问题

javascript canvas

Javascript 使用画布检测Face API问题,javascript,canvas,Javascript,Canvas,我目前正在尝试使用FaceAPI来检测用户上传的图像。我正试图按照文件和论坛锁定，所以我最好的赌注将在这里。代码如下： <!DOCTYPE html> <html> <head> <title>FaceDetect</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1

我目前正在尝试使用FaceAPI来检测用户上传的图像。我正试图按照文件和论坛锁定，所以我最好的赌注将在这里。代码如下：

<!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>


面部检测
.f_属性{显示：无；}
var data=canvas.toDataURL（'image/jpeg'，1.0）；
newblob=dataURItoBlob（数据）；
var formdata=new formdata（）；
formdata.append（“，faceKey）；
formdata.append（“，faceSecret）；
append（“filename”，“temp.jpg”）；
append（“文件”，newblob）；
$.ajax({
网址：'http://api.face.com/faces/detect.json',
数据：formdata，
cache:false，
contentType:false，
processData:false，
数据类型：“json”，
键入：“POST”，
成功：功能（数据）{
handleResult（data.photos[0]）；
}
});
//功劳http://stackoverflow.com/a/8782422/52160
函数dataURItoBlob（dataURI，回调）{
//将base64转换为字符串中的原始二进制数据
//不处理URL编码的数据URI
var-byteString；
if（dataURI.split（“，”[0].indexOf（“base64”）>=0）{
byteString=atob（dataURI.split（“，”[1]）；
}否则{
byteString=unescape（dataURI.split（“，”[1]）；
}
//分离出mime组件
var mimeString=dataURI.split（“，”[0]。split（“：”[1]。split（“；”[0]；
//将字符串的字节写入ArrayBuffer
var ab=新阵列缓冲区（byteString.length）；
var ia=新的UINT8阵列（ab）；
for（var i=0；i


我在Chrome控制台中不断收到“canvas”未定义错误。我不太确定我的问题出在哪里
任何帮助都很好，谢谢
编辑-删除的键，因为您没有定义它
var canvas = document.getElementById('canvas'),
    data = canvas.toDataURL('image/jpeg', 1.0);

将js中的顶行更改为包含此内容，您应该已经准备好了
此外，当您定义“画布”时，您应该能够进行更改
document.getElementById('canvas').getContext('2d')

到
字体掌心：，哇，谢谢你。我很头痛，想弄清楚这个API的其余部分，但我忘了。谢谢等待3分钟，这样我就可以在这里接受你的答案。嗨，我在尝试图像预调整代码时遇到了相同的错误。错误消失了！然而，代码没有起作用。有指针吗？错误是一个未定义的值-在您交叉链接的答案中有很多未定义的值，这看起来是一个不完整的代码段。
canvas.getContext('2d');