如何在 JavaScript 中将图像转换为 Base64 字符串？

在 JavaScript 中将图像转换为 Base64 字符串

与远程服务器交互或在 JavaScript 中处理图像数据时，将图像转换为 Base64 字符串成为必要性。 Base64 字符串表示文本格式的二进制数据，可以通过网络安全传输图像。

有多种技术可用于此转换：

1. FileReader 方法：

此方法涉及使用 XMLHttpRequest 将图像加载为 blob，然后使用 FileReader API 的 readAsDataURL() 方法将其转换为 dataURL。 dataURL 由 header（表示数据格式）和 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://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

通过将 dataURL 传递给回调函数，您可以检索 Base64 编码的图像字符串。

以上是如何在 JavaScript 中将图像转换为 Base64 字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！