0

私が現在やろうとしているのは、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コンソールで「キャンバス」が定義されていないというエラーが表示され続けます。どこで問題が発生しているのかよくわかりません。

どんな助けでも大いに感謝します。

編集-削除されたキー

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 に答える