在没有画布的情况下将图像 url 转换为 base64 JavaScript

在一些情况下，我们需要将图片转换成 base64 格式，以便于在不通过网络请求的情况下将图片展示到网页中。这时候，我们通常会使用 Canvas 来完成这个转换过程。但是在某些情况下，我们不想使用 Canvas，那么该怎么办呢？

下面介绍一种可以在不使用 Canvas 的情况下将图片转换成 base64 的方法。

实现

我们可以使用 XMLHttpRequest 对象来加载图片，并使用 FileReader 对象将加载的图片文件转换成 base64 格式。

实现代码如下：

function loadImage(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();
}

在上面的代码中，loadImage 函数接收两个参数：图片的 url 和回调函数。该函数使用 XMLHttpRequest 对象来发送一个 GET 请求，并设置 responseType 为 blob，这样就能够获取到图片文件的二进制数据。

当请求成功后，我们使用 FileReader 对象来读取获取到的图片文件，然后使用 readAsDataURL 方法将其转换成 base64 格式，并将结果通过回调函数返回。

使用该方法可以很方便地将任意图片转换成 base64 格式，而不需要使用 Canvas。

总结

上面介绍了一种在不使用 Canvas 的情况下将图片转换成 base64 格式的方法。该方法使用了 XMLHttpRequest 和 FileReader 对象，可以很方便地将任意图片转换成 base64 格式，并将结果通过回调函数返回。