タグ「cURL」が付けられているもの

画像読み込みのところを修正しました。

デモ

【修正前】

        // 画像ファイルをcanvasへ読み込む
        var img = new Image();
        img.src = url;
        // canvasサイズを画像サイズに合わせる。
        cvs.attr("width", img.width).attr("height", img.height);
        ctx.drawImage(img, 0, 0);

【修正後】

        // 画像ファイルをcanvasへ読み込む
        var img = new Image();
        img.src = url;
        // 画像のロードが終わってからcanvasへ読み込む
        img.onload = function(){
            // canvasサイズを画像サイズに合わせる。
            cvs.attr("width", img.width).attr("height", img.height);
            ctx.drawImage(img, 0, 0);
        };

修正前は、new Image()でイメージオブジェクトを作成し、
img.srcに画像のURLを渡すと同時にcanvasへ画像ロードも行っていました。

しかし、イメージオブジェクトは画像が読み込まれた後じゃないと機能しない。
ということで…

imgのloadイベント発生時にcanvasのサイズ決めと画像読込を行うように変更しました。

「detectFace();」という顔認識APIを使ってみました。

HTML5 + CSS3 + JS(jQuery) + PHP なので、IE以外でご覧ください。

デモ

【 使い方 】
画像のURLを貼って「判定」ボタンを押すと、イメージを読み込み、顔認識の結果を表示します。

画像の読み込みのタイミングとAPIからのレスポンスのタイミングの調整ができてないので、
「判定」ボタンを押しても無反応のときは、もう一度押してみてください。

• canvas要素内に画像を読み込み、その上に顔認識APIから帰ってきたXML情報を元に円を描きます。
• 同一生成元ポリシー上、JSのみで他ドメインのXMLデータを扱えないので、間にPHPをかましてます。
• PHPでcURLを使ってAPIから返ってきたXMLをそのままJS側に渡し、jQueryでXMLをDOM操作してます。
• あと、背景部分にCSS3のbox-shadowをinset指定で使い、内側にドロップシャドウをかけてます。

<?php
	/* API設定 */
	define("API", "http://detectface.com/api/detect");
	
	$url = urlencode($_GET["url"]);

	/* cURL */
	$curl = curl_init(API . "?url=" . $url);
	curl_exec($curl);
	curl_close($curl);