首页 > 如何用js实现image的二进制流?

如何用js实现image的二进制流?

正在用face++获取图像信息 api里有url 或 img[POST]两个参数
用于待检测图片的URL 或者 通过POST方法上传的二进制数据。
api地址如下http://www.faceplusplus.com.cn/detection_detect/

我尝试用url发送参数是可行的,img的二进制数据有人提出
File 对象继承自 Blob 对象,所以直接把 File 塞进去就可以:

var file = input.files[0]
api.request('detection/detect', {
  img: file
}, function(err, result) {
})

在我使用此方法发送数据返回错误MISSING_ARGUMENTS: url or img
我的代码如下

;(function(){
    var removeElem = function(elem) {
        var parent = elem.parentNode;
        if(parent && parent.nodeType !== 11) {
            parent.removeChild(elem);
        }
    }
    
    var parseData = function(data) {
        var ret = "";
        if(typeof data === "string") {
            ret = data;
        }
        else if(typeof data === "object") {
            for(var key in data) {
                ret += "&" + key + "=" + encodeURIComponent(data[key]);
            }
        }
        ret += "&_time=" + now();
        ret = ret.substr(1);
        return ret;
    }

    var formatParams = function(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        }
        return arr.join('&');
    }

    var jsonp = function(url, option){
        var name;
        url = url + (url.indexOf("?") === -1 ? "?" : "&") + formatParams(option.data);
        
        var match = /callback=(\w+)/.exec(url);
        if(match && match[1]) {
            name = match[1];
        } else {
            name = "jsonp_" + Math.floor(Math.random()*9999);
            url = url.replace("callback=?", "callback="+name);
            url = url.replace("callback=%3F", "callback="+name);
        }
        console.log(url)
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.id = "id_" + name;
        
        window[name] = function(json) {
            window[name] = undefined;
            var elem = document.getElementById("id_" + name);
            removeElem(elem);
            option.succ(json);
        };
        
        var head = document.getElementsByTagName("head");
        if(head && head[0]) {
            head[0].appendChild(script);
        }
    }
    window.JSONP = jsonp;
})();
function jsonFunc(img_data){
    JSONP('http://apicn.faceplusplus.com/v2/detection/detect?api_key=5f35e806e65f13dc166a16b2362627be&api_secret=zn1L8a-z4Wtr6yGiz4xCMlgJoTCNDSlo&callback=?',{
      data : {
        img : img_data
      },
      succ : function(result){
        var gender = result.face[0].attribute.gender;
        var age = result.face[0].attribute.age;
        document.getElementsByTagName('h1')[0].innerText = '你的性别为:' + gender.value + ' 年龄为:' + (age.value - age.range); 
      }
    })
}
var $input = document.getElementById("uploadfile");
    $input.addEventListener("change", handleFiles, false);
    function handleFiles(){
        var fileList = this.files;
        var file = fileList[0];
        jsonFunc(file)
    }

请求解决~ 谢谢!!= ̄ω ̄=


第一 都说是 POST 上传数据了,JSONP只能GET,不能POST
第二 看了一下 face++ 的响应头,支持CROS直接跨域请求,所以还是不需要 JSONP

大概的代码,没试

function handleFiles(){
    var formData = new FormData();
    formData.append('img', this.files[0]);
    
    var url = 'http://apicn.faceplusplus.com/v2/detection/detect?api_key=5f35e806e65f13dc166a16b2362627be&api_secret=zn1L8a-z4Wtr6yGiz4xCMlgJoTCNDSlo'
    fetch(url, {   
        method: 'POST',
        body: formData
    })
}
【热门文章】
【热门文章】