Javascript 将图像URL转换为基64字符串

我有这样的图像URL-

我想创建一个helper函数，在该函数中，我将图像URL作为参数传递，它将返回base64字符串。现在我采用这种方法，但这种方法将URL转换为base64，但它不会返回base64

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}



toDataUrl('https://graph.facebook.com/3938027626271800/picture?type=normal', function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});

---

由于图像可能包含敏感数据，因此不可能读取从不同域加载的图像，除非它们通过指定标头允许使用CORS

允许内容允许来源：

您的示例运行良好，因为facebook图像提供了此标题，但它不会适用于来自外部域的所有图像

您的第二个想法可能是尝试将图像绘制到画布中，然后取回数据，但幸运的是，为了用户的安全，这也是禁止的：

唯一的方法是在您的域上创建一个代理来从外部源下载映像，它也可以在后端为您将其转换为base64。这是安全的，因为图像不再在浏览器用户上下文中下载，不会使用其私人cookie和IP地址，因此不会包含任何敏感数据。

在HTML文件中：

<input type="file" (change)="selectedImage($event)" accept="image/*" name="Image">

---

返回base64而不是base64是什么意思？ 预期产量是多少？ 看起来您的代码运行得很好，我用另一种方法编写的代码得到了与您相同的结果

async function getBase64ImageFromUrl(imageUrl) {
  var res = await fetch(imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
        resolve(reader.result);
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
    reader.readAsDataURL(blob);
  })
}

getBase64ImageFromUrl('https://graph.facebook.com/3938027626271800/picture?type=normal')
    .then(result => console.log(result))
    .catch(err => console.error(err));

---

对于meCan，我们可以使用getBase64ImageFromUrl方法而无需回调。我只想将其存储在一个变量中，如------let image=this.getBase64ImageFromUrl（url）；您可以签出async/wait，或者需要在回调中指定let image=result。

async function getBase64ImageFromUrl(imageUrl) {
  var res = await fetch(imageUrl);
  var blob = await res.blob();

  return new Promise((resolve, reject) => {
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
        resolve(reader.result);
    }, false);

    reader.onerror = () => {
      return reject(this);
    };
    reader.readAsDataURL(blob);
  })
}

getBase64ImageFromUrl('https://graph.facebook.com/3938027626271800/picture?type=normal')
    .then(result => console.log(result))
    .catch(err => console.error(err));