Face API Detect Issue with Canvas

Question

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

score 2 · Accepted Answer · answered Jun 20 '12 at 16:11

2

because you don't define it...

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

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

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

to

canvas.getContext('2d');

answered Jun 20 '12 at 16:11

rlemon

17,518
14
92
123

:facepalms:, wow thank you. I had a headache trying to figure out the rest of this API i forgot that. Thanks! -- Waiting 3 minutes so I can accept your answer on here. – shayward Jun 20 '12 at 16:20
Hi I got the same error when I tried out the code for image pre-resize http://stackoverflow.com/a/10334170/823386 . The error vanished! However, the code didnt work. Any pointers? – sbose Jan 17 '13 at 12:20
The error was an undefined value - in that answer you cross-link there are a lot of undefined values, it would appear to be an incomplete code snippet. – rlemon Jan 17 '13 at 13:12

Face API Detect Issue with Canvas

1 Answers1