我正在使用react-native-facebook-login来获取用户数据。它返回了我的个人资料图片的网址。当我在浏览器中粘贴此网址时,图片会被下载。 它返回以下名为profile
的字符串{"id":"10210xxx114564932","name":"Stan Shivam","email":"ansh1602@gmail.com","first_name":"Shivam","last_name":"Stan","age_range":{"min":21},"link":"https:\/\/www.facebook.com\/app_scoped_user_id\/10210663114564932\/","picture":{"data":{"height":50,"is_silhouette":false,"url":"https:\/\/lookaside.facebook.com\/platform\/profilepic\/?asid=10210663114564932&height=50&width=50&ext=1523007905&hash=AeQ-_PZnt1JTbnth","width":50}},"gender":"male","locale":"en_GB","timezone":5.5,"updated_time":"2018-03-27T18:37:33+0000","verified":true}
我想要做的是我想将网址转换为base64并将其发送到服务器。但我无法在此找到一些好的啧啧。
到目前为止我尝试了什么。
getBase64ImageFromUrl = async (imageUrl) => {
const res = await fetch(imageUrl);
console.log(res);
const blob = await res.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', () => {
resolve(reader.result);
}, false);
reader.onerror = () => {
return reject(this);
};
reader.readAsDataURL(blob);
});
};
从构造函数
调用它this.getBase64ImageFromUrl('https://lookaside.facebook.com/platform/profilepic/?asid=10210663114564932&height=50&width=50&ext=1523007763&hash=AeSavHT5oXVEMq4w')
.then(result => console.log(result))
.catch(err => console.error(err));
但是它给了我res.blob()不是一个函数。 我究竟需要使用什么来实现它。
答案 0 :(得分:1)
我使用FileReader解决了这个问题。使用以下函数并传递url和回调。感谢
export const toDataUrl = (url, callback) => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
const reader = new FileReader();
reader.onloadend = () => {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
};
调用函数
toDataUrl('https://lookaside.facebook.com/platform/profilepic/?asid=10210663114564932&height=50&width=50&ext=1523007763&hash=AeSavHT5oXVEMq4w', (myBase64) => {
console.log(myBase64); // myBase64 is the base64 string
});