0

我目前正在尝试做的是使用人脸 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 控制台中不断收到“画布”未定义错误。不太确定我在哪里遇到问题。

任何帮助都会非常感谢。

编辑 - 删除的键

4

1 回答 1

2

因为你没有定义它...

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

更改您的 js 中的第一行以包含此内容，您应该已准备就绪。

此外，当您定义“画布”时，您应该能够更改

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

至

canvas.getContext('2d');
于 2012-06-20T16:11:06.120 回答