javascript - 如何用js实现image的二进制流?
本文介绍了javascript - 如何用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
})
}
这篇关于javascript - 如何用js实现image的二进制流?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文