JS实现Base64、URL和Blob之间相互转换的三种方式

在前端开发中，我们经常需要将数据在不同的格式之间进行转换，其中包括将数据转换为Base64、URL或Blob格式。本文将介绍三种常用的方式来实现这种转换，并通过JavaScript语言进行演示。

1. base64转换

Base64是一种将二进制数据转换为可打印字符的编码方式。在JavaScript中，可以通过以下方式将数据转换为Base64格式：

// 将字符串转换为Base64格式
function stringToBase64(str) {
  return btoa(str);
}

// 将Base64格式转换为字符串
function base64ToString(base64) {
  return atob(base64);
}

// 将Blob转换为Base64格式
function blobToBase64(blob, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
    callback(reader.result);
  };
}

2. URL转换

URL是一种用于网页浏览的地址格式，通过URL转换可以方便地在浏览器中展示数据。在JavaScript中，可以通过以下方式将数据转换为URL格式：

// 将Base64格式转换为URL格式
function base64ToURL(base64) {
  return URL.createObjectURL(base64ToBlob(base64));
}

// 将Blob转换为URL格式
function blobToURL(blob) {
  return URL.createObjectURL(blob);
}

3. Blob转换

Blob是一种表示不可变、原始数据的类文件对象。在JavaScript中，可以通过以下方式将数据转换为Blob格式：

// 将Base64格式转换为Blob格式
function base64ToBlob(base64) {
  const parts = base64.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const byteCharacters = atob(parts[1]);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}

// 将URL转换为Blob格式
function urlToBlob(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(xhr.response);
    }
  };
  xhr.send();
}

通过上述代码，我们可以实现在Base64、URL和Blob格式之间相互转换。不同的格式可根据需求进行选择，以便更好地处理数据。

总结：本文介绍了在JavaScript中实现Base64、URL和Blob之间相互转换的三种方式，并提供了相关的代码示例。根据实际需求，可以灵活选择合适的转换方式，以便更好地处理数据。

希望本文对你在前端开发中的数据转换有所帮助！

本文来自极简博客，作者：代码魔法师，转载请注明原文链接：JS实现Base64、URL和Blob之间相互转换的三种方式