将图像 URL 转换为 dataURL - Javascript答案

【问题标题】：Convert image URL to dataURL - Javascript将图像 URL 转换为 dataURL - Javascript
【发布时间】：2018-09-12 14:39:54
【问题描述】：

我正在使用 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}

我想要做的是将 url 转换为 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() 不是一个函数。为了实现它，我究竟需要使用什么。

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6 facebook-javascript-sdk

【解决方案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
            });

【讨论】：