微軟How-old(照片識別年齡)數據交互流程分析

目標網站：http://www.how-old.net/

網站功能：上傳照片，服務器返回數據、顯示照片中人物性別與年齡。

簡介：通過流程梳理，網站通過Ajax將用戶上傳圖片或是在線圖片以post形式傳到服務器，服務器分析圖片，並調用自身分析系統，返回Json數據，客戶端Js根據json數據生成樣式文件，顯示出示照片中人物性別與年齡。

應用流程

實例分析，進入網站後，可以通過兩種方式向服務器傳送圖片，1、use this photo，向服務器發送在線圖片，2、use your own phonto 上傳個人圖片發送至服務器

（1）use this photo，向服務器發送在線圖片，點擊按鈕，觸發analyzeUrl()事件，所在js文件http://www.how-old.net/bundles/demo

function analyzeUrl() {
    var n = document.getElementById("SelectorBox").getBoundingClientRect(),
    t = document.elementFromPoint(n.left + n.width / 2, n.top + n.height / 2),
    r = $(t).attr("data-url"),
    u = $(t).attr("data-orig-domain"),
    f = $(t).attr("data-orig-url"),
    i = $(t).attr("data-image-name");
    i == undefined && (i = null);
    updateThumbnail(r, u, f);
    processRequest(!1, r, i)
}

  r = $(t).attr("data-url"),獲取所選圖片的地址，經過processRequest()函數 對圖片數據進行處理，

function processRequest(n, t, i, r, u) {

    window.location.hash = "results";
    deleteFaceRects();
    $("#attributionMainId").hide();
    $("#jsonEventDiv").hide();
    var h = $("#analyzingText").val() + '<span><img id="loadingImage" src="/Images/ajax-loader_1.gif" /><\/span>',
    e = $("#couldntDetectText").val() + " " + $("#VerifyImageText").val(),
    c = $("#couldntDetectText").val();
    $("#analyzingLabel").css("visibility", "visible");
    $("#improvingLabel").css("visibility", "hidden");
    $("#analyzingLabel").html(h);
    var o = {},
    s = !1,
    f = "/Home/Analyze",
    l = $("#uploadBtn").get(0).files,
    a = $("#isTest").val(),
    v = $("#source").val(),
    y = $("#siteVersion").val();
    if (f += "?isTest=" + a + "&source=" + v + "&version=" + y, n) {
        if (r != null && r > 3145728) {
            $("#jsonEventDiv").hide();
            $("#analyzingLabel").html(e);
            $("#analyzingLabel").css("visibility", "visible");
            return
        }
        o = l[0];
        s = "application/octet-stream"
    } else f += "&faceUrl=" + encodeURIComponent(t) + "&faceName=" + i;
    $.ajax({
        type: "POST",
        url: f,
        contentType: s,
        processData: !1,
        data: o,
        success: function(n) {
            var t = JSON.parse(n);
            t == null || t.Faces == null || t.Faces.length === 0 ? ($("#analyzingLabel").html(c), $("#analyzingLabel").css("visibility", "visible")) : (renderImageFaces(t.Faces, u), $("#analyzingLabel").css("visibility", "hidden"));
            $("#improvingLabel").css("visibility", "visible");
            t != null && (showViewSourceLink(), $("#jsonEvent").text(t.AnalyticsEvent));
            adjustAttirbutionLinkLocation()
        },
        error: function() {
            $("#jsonEventDiv").hide();
            $("#analyzingLabel").html(e);
            $("#analyzingLabel").css("visibility", "visible");
            adjustAttirbutionLinkLocation()
        }
    })
}

window.location.hash = "results";並沒有重新加載頁面，

主體部分就是ajax的數據發送，與返回數據的處理，

發送部分，

url:f----/Home/Analyze(API)+&faceurl="&faceUrl=" + encodeURIComponent(t) (圖片路徑)

type:post

data: o,在線圖片不起作用，上傳本地圖片時，傳送圖片文件，

返回處理部分

var t = JSON.parse(n);將返回json數據，轉成對象

該部分谷歌瀏覽器Network數據監測
數據請求

Remote Address:191.236.156.64:80
Request URL:http://www.how-old.net/Home/Analyze?isTest=False&source=&version=001&faceUrl=Images%2Ffaces2%2Fmain0012.jpg&faceName=faces2/main0012.jpg
Request Method:POST
Status Code:200 OK

數據返回

返回數據："{\"AnalyticsEvent\":\"[\\r\\n {\\r\\n \\\"face\\\": {\\r\\n \\\"age\\\": 24.0,\\r\\n \\\"gender\\\": \\\"Male\\\"\\r\\n },\\r\\n \\\"event_datetime\\\": \\\"2015-07-27T16:07:19.3746962Z\\\",\\r\\n \\\"user_id\\\": \\\"D16ADBB2-E5E3-4E7B-ADF6-3291227F535B\\\",\\r\\n \\\"session_id\\\": \\\"408c626c-5b8b-468a-86a4-4195e491d1f6\\\",\\r\\n \\\"submission_method\\\": \\\"FaceList\\\",\\r\\n \\\"user_agent\\\": \\\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36\\\",\\r\\n \\\"location\\\": {\\r\\n \\\"latitude\\\": 36.66,\\r\\n \\\"longitude\\\": 117.13\\r\\n },\\r\\n \\\"location_city\\\": {\\r\\n \\\"latitude\\\": 36.7,\\r\\n \\\"longitude\\\": 117.1\\r\\n },\\r\\n \\\"is_mobile_device\\\": false,\\r\\n \\\"browser_type\\\": \\\"Chrome\\\",\\r\\n \\\"platform\\\": \\\"MacOSX\\\",\\r\\n \\\"mobile_device_model\\\": \\\"Unknown\\\"\\r\\n }\\r\\n]\",\"Faces\":[{\"faceId\":null,\"faceRectangle\":{\"top\":182,\"left\":205,\"width\":226,\"height\":226},\"attributes\":{\"gender\":\"Male\",\"age\":24.0}}]}"

renderImageFaces(t.Faces, u)，將json數據顯示出樣式來。

function renderImageFaces(n, t) {
    current_faces = n;
    updateOrigImageDimensions(drawFaceRects, t)
}

function drawFaceRects() {
    var n;
    if ($("#faces").html("<div><\/div>"), n = $("#thumbnail"), current_faces != null) {
        var r = $("#thumbContainer"),
        u = n.offset().left - r.offset().left,
        t = n.height() / image_orig_height,
        i = n.width() / image_orig_width,
        f = current_faces.length;
        $.each(current_faces,
        function(r, e) {
            var s = e.faceRectangle,
            l = e.attributes.age,
            a = e.attributes.gender,
            o = {},
            h, c;
            o.top = Math.round(t * s.top);
            o.height = Math.round(t * s.height);
            o.left = Math.round(i * s.left) + u;
            o.width = Math.round(i * s.width);
            h = adjustRectOrientation(o, n.width(), n.height(), image_orig_rotation);
            c = $("#faces”);

add_rect = function(n, t, i, r, u, f) {
        var o = "rect" + Math.round(Math.random() * 1e4),
                e = null,
                c = "n/a",
                s, h, l, a;
        t != null && (c = Math.round(Number(t)));
        s = static_url+"/Images/icon-gender-male.png";
        i != null && i.toLowerCase() === "female" && (s = static_url+"/Images/icon-gender-female.png");
        h = f <= 2 ? "big-face-tooltip" : "small-face-tooltip";
        e = '<div><span><img src="' + s + '" class=' + h + "><\/span>" + c + "<\/div>";
        $(e).css("background-color", "#F1D100");
        l = '<div data-html="true" class="child face-tooltip ' + h + ' " id="' + o + '"/>';
        $(l).appendTo(u).css("left", n.left + "px").css("top", n.top + "px").css("width", n.width + "px").css("height", n.height + "px").css("border", "1px solid white").css("position", "absolute");
        e != null && (a = "top", $("#" + o).tooltip({
                trigger: "manual",
                show: !0,
                placement: a,
                title: e,
                html: !0
        }), $("#" + o).tooltip("show"))
};

代碼追蹤流程：renderImageFaces=》drawFaceRects=》add_rect

最後add_rect函數中 l用於定位臉部位置，e用於顯示性別、年齡參數，/Images/icon-gender-female.png爲性別圖片，注意tooltip()調用的是bootstrap的方法，要引入bootstrap.js文件

示例

： 

（2）use your own phonto，上傳個人圖片

點擊按鈕，觸發#uploadBtn的點擊事件

$(window).load(function() {
    document.getElementById("uploadBtn").addEventListener("change", handleFileSelect, !1);
    document.getElementById("uploadBtn").addEventListener("click",
    function() {
        this.value = null
    },
    !1);
    window.location.hash = "";
    iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? !0 : !1
});

jQuery 將”uploadBtn" 的觸發事件綁定了handleFileSelect函數

感謝老朋友徐在過程中的幫助。